<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Writing Modes Level 4</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="testing" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="CSS Writing Modes Level 4 defines CSS support for various writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-writing-modes-4/" rel="canonical">
<style>
object { vertical-align: middle; }
.sidebar { float: right; background: #eee; border: solid gray; margin: 1em; }
.sidebar .figure { margin: 1em; }
.sidebar object { margin: 0 auto; display: block; }
.figurepair { display: table; margin: 1em auto; }
.figurepair .figure { display: table-cell; padding-left: .5em; padding-right: .5em; }
h2, .example { clear: both; }
.figure img,
.figure object,
.example img,
dd img { max-width: 100%; display: block; margin: 1em auto; }
div.figure table {
  margin:auto;
}
.ascii-art {
  display: table;
  margin: 1em auto;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Writing Modes Level 4</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2018/CR-css-writing-modes-4-20180524/" rel="prev">https://www.w3.org/TR/2018/CR-css-writing-modes-4-20180524/</a>
      <dt>Test Suite:
      <dd><a href="http://test.csswg.org/suites/css-writing-modes-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-writing-modes-3_dev/nightly-unstable/</a>
      <dt>Issue Tracking:
      <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/30">Tracker</a>
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-writing-modes-4">GitHub Issues</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="45369"><a class="p-name fn u-email email" href="mailto:kojiishi@gmail.com">Koji Ishii</a> (<span class="p-org org">Google</span>)
      <dt class="editor">Former Editors:
      <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:murakami@antenna.co.jp">Shinyu Murakami</a> (<span class="p-org org">Antenna House</span>)
      <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:paulnel@microsoft.com">Paul Nelson</a> (<span class="p-org org">Microsoft</span>)
      <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:michelsu@microsoft.com">Michel Suignard</a> (<span class="p-org org">Microsoft</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-writing-modes-4/Overview.bs">GitHub Editor</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>CSS Writing Modes Level 4 defines CSS support for various writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-writing-modes” in the title,
	preferably like this:
	“[css-writing-modes] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk">
   <p>The following features are at-risk, and may be dropped during the CR period: </p>
   <ul>
    <li>The look-ahead/look-behind sequencing rules for <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright">text-combine-upright</a>.
    <li><a href="#auto-multicol">Automatic multi-column behavior</a> of orthogonal flows.
   </ul>
   <p>“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.</p>
  </div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#text-flow"><span class="secno">1</span> <span class="content"> Introduction to Writing Modes</span></a>
     <ol class="toc">
      <li><a href="#placement"><span class="secno">1.1</span> <span class="content"> Module Interactions</span></a>
      <li><a href="#values"><span class="secno">1.2</span> <span class="content"> Value Types and Terminology</span></a>
     </ol>
    <li>
     <a href="#text-direction"><span class="secno">2</span> <span class="content"> Inline Direction and Bidirectionality</span></a>
     <ol class="toc">
      <li><a href="#direction"><span class="secno">2.1</span> <span class="content"> Specifying Directionality: the <span class="property">direction</span> property</span></a>
      <li><a href="#unicode-bidi"><span class="secno">2.2</span> <span class="content"> Embeddings and Overrides: the <span class="property">unicode-bidi</span> property</span></a>
      <li><a href="#bidi-example"><span class="secno">2.3</span> <span class="content"> Example of Bidirectional Text</span></a>
      <li>
       <a href="#bidi-algo"><span class="secno">2.4</span> <span class="content"> Applying the Bidirectional Reordering Algorithm</span></a>
       <ol class="toc">
        <li><a href="#bidi-para-direction"><span class="secno">2.4.1</span> <span class="content"> Bidi Paragraph Embedding Levels</span></a>
        <li><a href="#bidi-control-codes"><span class="secno">2.4.2</span> <span class="content"> CSS–Unicode Bidi Control Translation, Text Reordering</span></a>
        <li><a href="#bidi-atomic-inlines"><span class="secno">2.4.3</span> <span class="content"> Bidi Treatment of Atomic Inlines</span></a>
        <li><a href="#bidi-embedding-breaks"><span class="secno">2.4.4</span> <span class="content"> Paragraph Breaks Within Embeddings and Isolates</span></a>
        <li>
         <a href="#bidi-box-model"><span class="secno">2.4.5</span> <span class="content"> Reordering-induced Box Fragmentation</span></a>
         <ol class="toc">
          <li><a href="#bidi-fragmentation"><span class="secno">2.4.5.1</span> <span class="content"> Conditions of Reordering-induced Box Fragmentation</span></a>
          <li><a href="#bidi-fragment-boxes"><span class="secno">2.4.5.2</span> <span class="content"> Box Model of Reordering-induced Box Fragments</span></a>
         </ol>
       </ol>
     </ol>
    <li>
     <a href="#vertical-modes"><span class="secno">3</span> <span class="content"> Vertical Writing Modes</span></a>
     <ol class="toc">
      <li><a href="#vertical-intro"><span class="secno">3.1</span> <span class="content"> Introduction to Vertical Writing</span></a>
      <li>
       <a href="#block-flow"><span class="secno">3.2</span> <span class="content"> Block Flow Direction: the <span class="property">writing-mode</span> property</span></a>
       <ol class="toc">
        <li><a href="#svg-writing-mode"><span class="secno">3.2.1</span> <span class="content"> Obsolete SVG1.1 <span class="property">writing-mode</span> Values</span></a>
       </ol>
     </ol>
    <li>
     <a href="#inline-alignment"><span class="secno">4</span> <span class="content"> Inline-level Alignment</span></a>
     <ol class="toc">
      <li><a href="#intro-baselines"><span class="secno">4.1</span> <span class="content"> Introduction to Baselines</span></a>
      <li><a href="#text-baselines"><span class="secno">4.2</span> <span class="content"> Text Baselines</span></a>
      <li><a href="#replaced-baselines"><span class="secno">4.3</span> <span class="content"> Atomic Inline Baselines</span></a>
      <li><a href="#baseline-alignment"><span class="secno">4.4</span> <span class="content"> Baseline Alignment</span></a>
     </ol>
    <li>
     <a href="#intro-text-layout"><span class="secno">5</span> <span class="content"> Introduction to Vertical Text Layout</span></a>
     <ol class="toc">
      <li>
       <a href="#text-orientation"><span class="secno">5.1</span> <span class="content"> Orienting Text: the <span class="property">text-orientation</span> property</span></a>
       <ol class="toc">
        <li><a href="#vertical-font-features"><span class="secno">5.1.1</span> <span class="content"> Vertical Typesetting and Font Features</span></a>
        <li><a href="#vertical-orientations"><span class="secno">5.1.2</span> <span class="content"> Mixed Vertical Orientations</span></a>
        <li><a href="#glyph-orientation"><span class="secno">5.1.3</span> <span class="content"> Obsolete: the SVG1.1 <span class="property">glyph-orientation-vertical</span> property</span></a>
       </ol>
     </ol>
    <li>
     <a href="#abstract-box"><span class="secno">6</span> <span class="content"> Abstract Box Terminology</span></a>
     <ol class="toc">
      <li><a href="#abstract-axes"><span class="secno">6.1</span> <span class="content"> Abstract Dimensions</span></a>
      <li><a href="#logical-directions"><span class="secno">6.2</span> <span class="content"> Flow-relative Directions</span></a>
      <li><a href="#line-directions"><span class="secno">6.3</span> <span class="content"> Line-relative Directions</span></a>
      <li><a href="#logical-to-physical"><span class="secno">6.4</span> <span class="content"> Abstract-to-Physical Mappings</span></a>
     </ol>
    <li>
     <a href="#abstract-layout"><span class="secno">7</span> <span class="content"> Abstract Box Layout</span></a>
     <ol class="toc">
      <li><a href="#vertical-layout"><span class="secno">7.1</span> <span class="content"> Principles of Layout in Vertical Writing Modes</span></a>
      <li><a href="#dimension-mapping"><span class="secno">7.2</span> <span class="content"> Dimensional Mapping</span></a>
      <li>
       <a href="#orthogonal-flows"><span class="secno">7.3</span> <span class="content"> Orthogonal Flows</span></a>
       <ol class="toc">
        <li><a href="#orthogonal-auto"><span class="secno">7.3.1</span> <span class="content"> Available Space in Orthogonal Flows</span></a>
        <li><a href="#auto-multicol"><span class="secno">7.3.2</span> <span class="content"> Auto-sizing Block Containers in Orthogonal Flows</span></a>
        <li><a href="#orthogonal-layout"><span class="secno">7.3.3</span> <span class="content"> Auto-sizing Other Orthogonal Flow Roots</span></a>
        <li><a href="#orthogonal-pagination"><span class="secno">7.3.4</span> <span class="content"> Fragmenting Orthogonal Flows</span></a>
       </ol>
      <li><a href="#logical-direction-layout"><span class="secno">7.4</span> <span class="content"> Flow-Relative Mappings</span></a>
      <li><a href="#line-mappings"><span class="secno">7.5</span> <span class="content"> Line-Relative Mappings</span></a>
      <li><a href="#physical-only"><span class="secno">7.6</span> <span class="content"> Purely Physical Mappings</span></a>
     </ol>
    <li>
     <a href="#principal-flow"><span class="secno">8</span> <span class="content"> The Principal Writing Mode</span></a>
     <ol class="toc">
      <li><a href="#icb"><span class="secno">8.1</span> <span class="content"> Propagation to the Initial Containing Block</span></a>
      <li><a href="#page-direction"><span class="secno">8.2</span> <span class="content"> Page Flow: the page progression direction</span></a>
     </ol>
    <li>
     <a href="#text-combine"><span class="secno">9</span> <span class="content"> Glyph Composition</span></a>
     <ol class="toc">
      <li>
       <a href="#text-combine-upright"><span class="secno">9.1</span> <span class="content"> Horizontal-in-Vertical Composition: the <span class="property">text-combine-upright</span> property</span></a>
       <ol class="toc">
        <li><a href="#text-combine-runs"><span class="secno">9.1.1</span> <span class="content"> Text Run Rules</span></a>
        <li><a href="#text-combine-layout"><span class="secno">9.1.2</span> <span class="content"> Layout Rules</span></a>
        <li>
         <a href="#text-combine-compression"><span class="secno">9.1.3</span> <span class="content"> Compression Rules</span></a>
         <ol class="toc">
          <li><a href="#text-combine-fullwidth"><span class="secno">9.1.3.1</span> <span class="content"> Full-width Characters</span></a>
         </ol>
       </ol>
     </ol>
    <li><a href="#priv-sec"><span class="secno">10</span> <span class="content">Privacy and Security Considerations</span></a>
    <li>
     <a href="#changes"><span class="secno"></span> <span class="content">Changes</span></a>
     <ol class="toc">
      <li><a href="#changes-201805"><span class="secno"></span> <span class="content"> Changes since the <span>May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</span></span></a>
      <li><a href="#additions"><span class="secno"></span> <span class="content"> New in Level 4</span></a>
     </ol>
    <li><a href="#acknowledgements"><span class="secno"></span> <span class="content"> Acknowledgements</span></a>
    <li><a href="#script-orientations"><span class="secno"></span> <span class="content">Appendix A:
Vertical Scripts in Unicode</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="text-flow"><span class="secno">1. </span><span class="content"> Introduction to Writing Modes</span><a class="self-link" href="#text-flow"></a></h2>
   <p>CSS Writing Modes Level 4 defines CSS features to support for various international
    writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left
    (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and
    vertical (e.g. Asian scripts).</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="writing-mode">writing mode</dfn> in CSS is determined by the <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a>, <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction">direction</a>, and <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation">text-orientation</a> properties. It is defined primarily
    in terms of its <a data-link-type="dfn" href="#inline-base-direction" id="ref-for-inline-base-direction">inline base direction</a> and <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction">block flow direction</a>: </p>
   <div class="sidebar">
    <div class="figure right">
      <a href="diagrams/text-flow-vectors-tb.svg"> <img alt="Latin-based writing mode" class="landscape" src="diagrams/text-flow-vectors-tb.png"></a> 
     <p class="caption">Latin-based writing mode </p>
    </div>
    <div class="figure left">
      <a href="diagrams/text-flow-vectors-lr-reverse.svg"> <img alt="Mongolian-based writing mode" class="landscape" src="diagrams/text-flow-vectors-lr-reverse.png"></a> 
     <p class="caption">Mongolian-based writing mode </p>
    </div>
    <div class="figure right">
      <a href="diagrams/text-flow-vectors-tb.svg"> <img alt="Han-based writing mode" class="landscape" src="diagrams/text-flow-vectors-tb.png"></a> <a href="diagrams/text-flow-vectors-rl.svg"> <img alt="Han-based writing mode" class="landscape" src="diagrams/text-flow-vectors-rl.png"></a> 
     <p class="caption">Han-based writing mode </p>
    </div>
   </div>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inline-base-direction">inline base direction</dfn> is the primary direction in which
    content is ordered on a line and defines on which sides the “start”
    and “end” of a line are. The <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①">direction</a> property specifies the
    inline base direction of a box and, together with the <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi">unicode-bidi</a> property and the inherent directionality of any text content, determines
    the ordering of inline-level content within a line. </p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-flow-direction">block flow direction</dfn> is the direction in which
    block-level boxes stack  and the direction in which line boxes stack
    within a block container. The <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a> property determines the
    block flow direction.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="typographic-mode">typographic mode</dfn> determines if text should apply
    typographic conventions specific to vertical flow for <a data-link-type="dfn" href="#vertical-script" id="ref-for-vertical-script">vertical
    scripts</a>.
    This concept distinguishes vertical flow for <span id="ref-for-vertical-script①">vertical scripts</span> from
    rotated horizontal flow. </p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="horizontal-writing-mode">horizontal writing mode</dfn> is one with horizontal lines of
    text, i.e. a downward or upward block flow.
    A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="vertical-writing-mode">vertical writing mode</dfn> is one with vertical lines of text,
    i.e. a leftward or rightward block flow. </p>
   <p class="note" role="note">These terms should not be confused with <dfn data-dfn-type="dfn" data-noexport id="vertical-block-flow">vertical block flow<a class="self-link" href="#vertical-block-flow"></a></dfn> (which is a downward or
    upward block flow) and <dfn data-dfn-type="dfn" data-noexport id="horizontal-block-flow">horizontal block flow<a class="self-link" href="#horizontal-block-flow"></a></dfn> (which is
    leftward or rightward block flow). To avoid confusion, CSS
    specifications avoid this latter set of terms.</p>
   <p>Writing systems typically have one or two native writing modes. Some
    examples are: </p>
   <ul>
    <li>Latin-based systems are typically written using a left-to-right inline
      direction with a downward (top-to-bottom) block flow direction. 
    <li>Arabic-based systems are typically written using a right-to-left
      inline direction with a downward (top-to-bottom) block flow direction. 
    <li>Mongolian-based systems are typically written using a top-to-bottom
      inline direction with a rightward (left-to-right) block flow direction. 
    <li>Han-based systems are commonly written using a left-to-right inline direction
      with a downward (top-to-bottom) block flow direction, <strong>or</strong> a top-to-bottom inline direction with a leftward (right-to-left) block
      flow direction. Many magazines and newspapers will mix these two writing
      modes on the same page. 
   </ul>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①">text-orientation</a> component of the writing mode
    controls the <a data-link-type="dfn">glyph orientation</a>. </p>
   <p class="note" role="note">See Unicode Technical Note #22 <a data-link-type="biblio" href="#biblio-utn22">[UTN22]</a> (<a href="http://fantasai.inkedblade.net/style/discuss/vertical-text/paper">HTML version</a>)
    for a more in-depth introduction to writing modes and vertical text. </p>
   <h3 class="heading settled" data-level="1.1" id="placement"><span class="secno">1.1. </span><span class="content"> Module Interactions</span><a class="self-link" href="#placement"></a></h3>
   <p>This module replaces and extends the <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①">unicode-bidi</a> and <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②">direction</a> features defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> sections 8.6 and 9.10.
  The interaction of its features
  with other text operations
  in setting lines of text
  is described in <a href="https://www.w3.org/TR/css-text-3/#order">CSS Text 3 § Text Processing Order of Operations</a>. </p>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed values</a> of the <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②">writing-mode</a>, <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction③">direction</a>, and <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation②">text-orientation</a> properties
  (even on elements to which these properties themselves don’t apply <a data-link-type="biblio" href="#biblio-css-cascade-4">[CSS-CASCADE-4]</a>)
  are broadly able to influence the computed values of other, unrelated properties
  through calculations such as
  the computation of <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#font-relative-length" id="ref-for-font-relative-length">font-relative lengths</a> or the cascade of <a href="http://www.w3.org/TR/css-logical-1/">flow-relative properties</a> which purposefully depend on the computed <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode">writing mode</a> or on font metrics that can depend on the <span id="ref-for-writing-mode①">writing mode</span>. </p>
   <h3 class="heading settled" data-level="1.2" id="values"><span class="secno">1.2. </span><span class="content"> Value Types and Terminology</span><a class="self-link" href="#values"></a></h3>
   <p>This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>.
  Value types not defined in this specification are defined in CSS Values &amp; Units <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a>.
  Other CSS modules may expand the definitions of these value types.</p>
   <p>In addition to the property-specific values listed in their definitions,
  all properties defined in this specification
  also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> keywords as their property value.
  For readability they have not been repeated explicitly.</p>
   <p>Other important terminology and concepts used in this specification
  are defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> and <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a>. </p>
   <p><span id="bidi"></span></p>
   <h2 class="heading settled" data-level="2" id="text-direction"><span class="secno">2. </span><span class="content"> Inline Direction and Bidirectionality</span><a class="self-link" href="#text-direction"></a></h2>
   <p>While the characters in most scripts are written from left to right,
    certain scripts are written from right to left. In some documents,
    in particular those written with the Arabic  or Hebrew script, and in
    some mixed-language contexts, text in a single (visually displayed)
    block may appear with mixed directionality. This phenomenon is called <dfn data-dfn-type="dfn" data-export id="bidirectionality">bidirectionality<a class="self-link" href="#bidirectionality"></a></dfn>, or "bidi" for short.</p>
   <div class="figure">
    <p><img alt="An example of bidirectional text is a Latin name in an Arabic
                 sentence. The sentence overall is typeset right-to-left, but
                 the letters in the Latin word in the middle are typeset
                 left-to-right." src="diagrams/bidi.png"> </p>
    <p class="caption">Bidirectionality</p>
   </div>
   <p>The Unicode standard (<a href="http://www.unicode.org/reports/tr9/">Unicode Standard Annex #9</a>) defines a complex
    algorithm for determining the proper ordering of bidirectional text. The
    algorithm consists of an implicit part based on character properties,
    as well as explicit controls for embeddings and overrides. CSS relies
    on this algorithm to achieve proper bidirectional rendering. </p>
   <p>Two CSS properties, <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction④">direction</a> and <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②">unicode-bidi</a>,
    provide explicit embedding, isolation, and override controls in the CSS layer.
    Because the base directionality of a text depends on the structure and
    semantics of the document, the <span class="property" id="ref-for-propdef-direction⑤">direction</span> and <span class="property" id="ref-for-propdef-unicode-bidi③">unicode-bidi</span> properties
    should in most cases be used only to map bidi information in the markup
    to its corresponding CSS styles. </p>
   <p class="note" role="note"> The HTML specifications (<a data-link-type="biblio" href="#biblio-html401">[HTML401]</a>, section 8.2, and <a data-link-type="biblio" href="#biblio-html">[HTML]</a> <span spec-section="/rendering.html#bidi-rendering">section 14.3.5</span>) define
    bidirectionality behavior for HTML elements.</p>
   <p class="advisement"> <strong>If a document language provides markup features to control
    bidi, authors and users should use those features instead</strong> and not specify CSS rules to override them. </p>
   <h3 class="heading settled" data-level="2.1" id="direction"><span class="secno">2.1. </span><span class="content"> Specifying Directionality: the <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction⑥">direction</a> property</span><a class="self-link" href="#direction"></a></h3>
   <table class="def propdef" data-link-for-hint="direction">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-direction">direction</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">ltr <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> rtl 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>ltr 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified value 
     <tr>
      <th>Canonical order:
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>not animatable 
   </table>
   <p class="advisement">Because HTML UAs can turn off CSS styling, <strong>we recommend HTML authors to use the HTML <code>dir</code> attribute and &lt;bdo> element</strong> to ensure correct bidirectional layout in the absence of a style sheet. <strong>Authors <em>should not</em> use <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction⑦">direction</a> in HTML documents.</strong> </p>
   <p>This property specifies the <a data-link-type="dfn" href="#inline-base-direction" id="ref-for-inline-base-direction①">inline base direction</a> or directionality
    of any bidi paragraph, embedding, isolate, or override established by the box.
    (See <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi④">unicode-bidi</a>.) 
    In addition, it informs the ordering of <a href="https://www.w3.org/TR/CSS2/tables.html">table</a> column layout,
    the direction of horizontal <a href="https://www.w3.org/TR/CSS2/visufx.html#overflow">overflow</a>,
    and the default alignment of text within a line, and other layout effects
    that depend on the box’s inline base direction.</p>
   <p>Values for this property have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="direction" data-dfn-type="value" data-export id="valdef-direction-ltr">ltr</dfn>
    <dd>This value sets <a data-link-type="dfn" href="#inline-base-direction" id="ref-for-inline-base-direction②">inline base direction</a> (bidi directionality)
     to <a data-link-type="dfn" href="#line-left" id="ref-for-line-left">line-left</a>-to-<a data-link-type="dfn" href="#line-right" id="ref-for-line-right">line-right</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="direction" data-dfn-type="value" data-export id="valdef-direction-rtl">rtl</dfn>
    <dd>This value sets <a data-link-type="dfn" href="#inline-base-direction" id="ref-for-inline-base-direction③">inline base direction</a> (bidi directionality)
     to <a data-link-type="dfn" href="#line-right" id="ref-for-line-right①">line-right</a>-to-<a data-link-type="dfn" href="#line-left" id="ref-for-line-left①">line-left</a>. 
   </dl>
   <p class="note" role="note">The <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction⑧">direction</a> property has no effect on bidi reordering
    when specified on inline boxes whose <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi⑤">unicode-bidi</a> value is <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal">normal</a>,
    because the box does not open an additional level
    of embedding with respect to the bidirectional algorithm.</p>
   <p class="note" role="note">The <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction⑨">direction</a> property, when specified for table column boxes, is not inherited by
     cells in the column since columns are not the ancestors of the cells in
     the document tree. Thus, CSS cannot easily capture the "dir" attribute
     inheritance rules described in <a data-link-type="biblio" href="#biblio-html401">[HTML401]</a>, section 11.3.2.1. </p>
   <h3 class="heading settled" data-level="2.2" id="unicode-bidi"><span class="secno">2.2. </span><span class="content"> Embeddings and Overrides: the <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi⑥">unicode-bidi</a> property</span><a class="self-link" href="#unicode-bidi"></a></h3>
   <table class="def propdef" data-link-for-hint="unicode-bidi">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-unicode-bidi">unicode-bidi</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">normal <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> embed <span id="ref-for-comb-one②">|</span> isolate <span id="ref-for-comb-one③">|</span> bidi-override <span id="ref-for-comb-one④">|</span> isolate-override <span id="ref-for-comb-one⑤">|</span> plaintext 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>normal 
     <tr>
      <th>Applies to:
      <td>all elements, but see prose 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>not animatable 
   </table>
   <p class="advisement">Because HTML UAs can turn off CSS styling, <strong>we recommend HTML authors to use the HTML <code>dir</code> attribute, &lt;bdo> element,
    and appropriate distinction of text-level vs. grouping-level HTML element types</strong> to ensure correct bidirectional layout in the absence of a style sheet. <strong>Authors <em>should not</em> use <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi⑦">unicode-bidi</a> in HTML documents.</strong> </p>
   <p>Normally (i.e. when <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi⑧">unicode-bidi</a> is <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal①">normal</a>)
    an inline box is transparent to the unicode bidi algorithm;
    content is ordered as if the box’s boundaries were not there.
    Other values of the <span class="property" id="ref-for-propdef-unicode-bidi⑨">unicode-bidi</span> property cause inline boxes
    to create scopes within the algorithm,
    and to override the intrinsic directionality of text. </p>
   <p>The following informative table summarizes the box-internal and
    box-external effects of <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⓪">unicode-bidi</a>: </p>
   <table class="data">
    <caption>Effect of non-<a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal②">normal</a> values of <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①①">unicode-bidi</a> on inline boxes</caption>
    <colgroup span="2">
    <colgroup span="2">
    <thead>
     <tr>
      <th colspan="2" rowspan="2">
      <th colspan="2" scope="rowgroup"><abbr title="To surrounding contents, the box behaves as if its boundary were...">Outside</abbr> 
     <tr>
      <th><abbr title="a strong character of the box’s &apos;direction&apos;.">strong</abbr> 
      <th><abbr title="a neutral character.">neutral</abbr> 
    <tbody>
     <tr>
      <th rowspan="3" scope="colgroup"><abbr title="Within the box, content is ordered as if...">Inside</abbr> 
      <th><abbr title="the box’s boundaries were strong characters of the box’s &apos;direction&apos;.">scoped</abbr> 
      <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-embed" id="ref-for-valdef-unicode-bidi-embed">embed</a> 
      <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate" id="ref-for-valdef-unicode-bidi-isolate">isolate</a> 
     <tr>
      <th><abbr title="all text consisted of strong characters of the box’s &apos;direction&apos;.">override</abbr> 
      <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override">bidi-override</a> 
      <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate-override" id="ref-for-valdef-unicode-bidi-isolate-override">isolate-override</a> 
     <tr>
      <th><abbr title="the box were a standalone paragraph ordered using UAX9 heuristics.">plaintext</abbr> 
      <td>— 
      <td><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext">plaintext</a> 
   </table>
   <p>Values for this property have the following (normative) meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-normal">normal</dfn>
    <dd>The box does not open an additional level of embedding with
      respect to the bidirectional algorithm. For inline boxes,
      implicit reordering works across box boundaries.
    <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-embed">embed</dfn>
    <dd>
     If the box is inline, this value creates a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="directional-embedding">directional embedding</dfn> by opening an additional level of embedding with respect to the bidirectional algorithm.
      The direction of this embedding level is given by the <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①⓪">direction</a> property. Inside the box, reordering is done implicitly. 
     <p class="note" role="note">This value has no effect on boxes that are not inline. </p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-isolate">isolate</dfn>
    <dd>
     On an inline box, this <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="bidi-isolate|bidi-isolated|bidi isolation|isolation" id="bidi-isolate">bidi-isolates</dfn> its contents.
      This is similar to a directional embedding (and increases the embedding level accordingly)
      except that each sequence of inline-level boxes
      uninterrupted by any block boundary or <a data-link-type="dfn" href="#forced-paragraph-break" id="ref-for-forced-paragraph-break">forced paragraph break</a> is treated as an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="isolated-sequence">isolated sequence</dfn>: 
     <ul>
      <li>the content within the sequence is ordered
          as if inside an independent paragraph
          with the base directionality specified by the box’s <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①①">direction</a> property. 
      <li>for the purpose of bidi resolution in its containing bidi paragraph,
          the sequence is treated as if it were a single Object Replacement Character (U+FFFC). 
     </ul>
      In effect, neither is the content inside the box bidi-affected
      by the content surrounding the box,
      nor is the content surrounding the box bidi-affected by the
      content or specified directionality of the box.
      However, <span id="ref-for-forced-paragraph-break①">forced paragraph breaks</span> within the box still create
      a corresponding break in the containing paragraph. 
     <p class="note" role="note">This value has no effect on boxes that are not inline. </p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-bidi-override">bidi-override</dfn>
    <dd>This value puts the box’s immediate inline content in a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="directional-override">directional override</dfn>.
      For an inline, this means that the box acts like a <a data-link-type="dfn" href="#directional-embedding" id="ref-for-directional-embedding">directional embedding</a> in the bidirectional algorithm,
      except that reordering within it is strictly in sequence according to the <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①②">direction</a> property; the implicit part of the bidirectional algorithm
      is ignored.
      For a block container, the override is applied
      to an anonymous inline box that surrounds all of its content. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-isolate-override">isolate-override</dfn>
    <dd>This combines the <a data-link-type="dfn" href="#bidi-isolate" id="ref-for-bidi-isolate">isolation</a> behavior of <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate" id="ref-for-valdef-unicode-bidi-isolate①">isolate</a> with the <a data-link-type="dfn" href="#directional-override" id="ref-for-directional-override">directional override</a> behavior of <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override①">bidi-override</a>:
      to surrounding content, it is equivalent to <span class="css" id="ref-for-valdef-unicode-bidi-isolate②">isolate</span>,
      but within the box content is ordered as if <span class="css" id="ref-for-valdef-unicode-bidi-bidi-override②">bidi-override</span> were specified.
      It effectively nests a <span id="ref-for-directional-override①">directional override</span> inside an <a data-link-type="dfn" href="#isolated-sequence" id="ref-for-isolated-sequence">isolated sequence</a>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="unicode-bidi" data-dfn-type="value" data-export id="valdef-unicode-bidi-plaintext">plaintext</dfn>
    <dd>
     <p>This value behaves as <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate" id="ref-for-valdef-unicode-bidi-isolate③">isolate</a> except that for the purposes of
      the Unicode bidirectional algorithm, the base directionality of each
      of the box’s <a data-link-type="dfn" href="#bidi-paragraph" id="ref-for-bidi-paragraph">bidi paragraphs</a> (if a block container)
      or <a data-link-type="dfn" href="#isolated-sequence" id="ref-for-isolated-sequence①">isolated sequences</a> (if an inline)
      is determined by following the heuristic in rules P2 and P3
      of the Unicode bidirectional algorithm
      (rather than by using the <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①③">direction</a> property of the box). </p>
   </dl>
   <p>Following Unicode Bidirectional Algorithm clause HL3 <a data-link-type="biblio" href="#biblio-uax9">[UAX9]</a>,
  values other than <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal③">normal</a> effectively insert the corresponding Unicode bidi control codes
  into the text stream at the start and end of the inline element
  before passing the paragraph to the Unicode bidirectional algorithm for reordering.
  (See <a href="#bidi-control-codes">§ 2.4.2 CSS–Unicode Bidi Control Translation, Text Reordering</a>.) </p>
   <table class="data" id="bidi-control-codes-injection-table">
    <caption>Bidi control codes injected by <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①②">unicode-bidi</a> at the start/end of <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display" id="ref-for-propdef-display">display: inline</a> boxes</caption>
    <colgroup span="1">
    <colgroup span="2">
    <colgroup span="2">
    <thead>
     <tr>
      <th rowspan="3" scope="col"><a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①③">unicode-bidi</a> value 
      <th colspan="4"><a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①④">direction</a> value 
     <tr>
      <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr">ltr</a> 
      <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl">rtl</a> 
     <tr>
      <th>start 
      <th>end 
      <th>start 
      <th>end 
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal④">normal</a> 
      <td>— 
      <td>— 
      <td>— 
      <td>— 
     <tr>
      <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-embed" id="ref-for-valdef-unicode-bidi-embed①">embed</a> 
      <td>LRE (U+202A) 
      <td>PDF (U+202C) 
      <td>RLE (U+202B) 
      <td>PDF (U+202C) 
     <tr>
      <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate" id="ref-for-valdef-unicode-bidi-isolate④">isolate</a> 
      <td>LRI (U+2066) 
      <td>PDI (U+2069) 
      <td>RLI (U+2067) 
      <td>PDI (U+2069) 
     <tr>
      <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override③">bidi-override</a>* 
      <td>LRO (U+202D) 
      <td>PDF (U+202C) 
      <td>RLO (U+202E) 
      <td>PDF (U+202C) 
     <tr>
      <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-isolate-override" id="ref-for-valdef-unicode-bidi-isolate-override①">isolate-override</a>* 
      <td>FSI,LRO (U+2068,U+202D) 
      <td>PDF,PDI (U+202C,U+2069) 
      <td>FSI,RLO (U+2068,U+202E) 
      <td>PDF,PDI (U+202C,U+2069) 
     <tr>
      <th scope="row"><a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext①">plaintext</a> 
      <td>FSI (U+2068) 
      <td>PDI (U+2069) 
      <td>FSI (U+2068) 
      <td>PDI (U+2069) 
    <tfoot>
     <tr>
      <td colspan="5"> <small>* The LRO/RLO+PDF pairs are also applied
          to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box">root inline box</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container">block container</a> if these values of <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①④">unicode-bidi</a> were specified on the <span id="ref-for-block-container①">block container</span>. </small>
   </table>
   <p class="note" role="note">Because the <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⑤">unicode-bidi</a> property does not inherit,
  setting <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override④">bidi-override</a> or <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext②">plaintext</a> on a block box will
  not affect any descendant blocks. Therefore these values are best
  used on blocks and inlines that do not contain any block-level
  structures. </p>
   <p class="note" role="note">Note that <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⑥">unicode-bidi</a> does not affect the <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①⑤">direction</a> property even in the case of <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext③">plaintext</a>, and thus does not affect <span class="property" id="ref-for-propdef-direction①⑥">direction</span>-dependent layout calculations. </p>
   <p class="note" role="note"> Because the Unicode algorithm has a limit of 125 levels of embedding,
    care should be taken not to overuse <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⑦">unicode-bidi</a> values other than <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal⑤">normal</a>.
    In particular, a value of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a> should be used with extreme caution in deeply nested inline markup.
    However, for elements that are,
    in general, intended to be displayed as blocks, a setting of <span class="css" id="ref-for-propdef-unicode-bidi①⑧">unicode-bidi: isolate</span> is preferred to keep the element together
    in case the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display" id="ref-for-propdef-display①">display</a> is changed to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline" id="ref-for-valdef-display-inline">inline</a> (see example below). </p>
   <h3 class="heading settled" data-level="2.3" id="bidi-example"><span class="secno">2.3. </span><span class="content"> Example of Bidirectional Text</span><a class="self-link" href="#bidi-example"></a></h3>
   <p>The following example shows an XML document with bidirectional
    text. It illustrates an important design principle: document language
    designers should take bidi into account both in the language proper
    (elements and attributes) and in any accompanying style sheets. The
    style sheets should be designed so that bidi rules are separate from
    other style rules, and such rules should not be overridden by other
    style sheets so that the document language’s bidi behavior is preserved.</p>
   <div class="example" id="example-16648d44">
    <a class="self-link" href="#example-16648d44"></a> 
    <p>In this example, lowercase letters stand for inherently left-to-right
      characters and uppercase letters represent inherently right-to-left
      characters. The text stream is shown below in logical backing store order.</p>
<pre class="xml-example">&lt;section dir=rtl>
  &lt;para>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5&lt;/para>
  &lt;para>HEBREW6 &lt;emphasis>HEBREW7&lt;/emphasis> HEBREW8&lt;/para>
&lt;/section>
&lt;section dir=ltr>
  &lt;para>english9 english10 english11 HEBREW12 HEBREW13&lt;/para>
  &lt;para>english14 english15 english16&lt;/para>
  &lt;para>english17 &lt;quote dir=rtl>HEBREW18 english19 HEBREW20&lt;/quote>&lt;/para>
&lt;/section>
</pre>
    <p>Since this is arbitrary XML, the style sheet is responsible for
      setting the writing direction. This is the style sheet:</p>
<pre>/* Rules for bidi */
[dir=rtl] {direction: rtl; unicode-bidi: isolate; }
[dir=ltr] {direction: ltr; unicode-bidi: isolate; }

/* Rules for presentation */
section, para  {display: block;}
emphasis       {font-weight: bold;}
quote          {font-style: italic;}
</pre>
    <p>If the line length is long,
      the formatting of this text might look like this:</p>
<pre class="ascii-art">               5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

                                8WERBEH <b>7WERBEH</b> 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 <i data-lt>20WERBEH english19 18WERBEH</i>
</pre>
    <p>The first <code>&lt;section></code> element is a block with a right-to-left base direction,
      the second <code>&lt;section></code> element is a block with a left-to-right base direction.
      The <code>&lt;para></code>s are blocks that inherit the base direction from their parents.
      Thus, the first two <code>&lt;para></code>s are read starting at the top right,
      the final three are read starting at the top left.</p>
    <p>The <code>&lt;emphasis></code> element is inline-level,
      and since its value for <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①⑨">unicode-bidi</a> is <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-normal" id="ref-for-valdef-unicode-bidi-normal⑥">normal</a> (the initial value),
      it has no effect on the ordering of the text. </p>
    <p>The <code>&lt;quote></code> element, on the other hand,
      creates an <a data-link-type="dfn" href="#isolated-sequence" id="ref-for-isolated-sequence②">isolated sequence</a> with the given internal directionality.
      Note that this causes <samp>HEBREW18</samp> to be to the right of <samp>english19</samp>. </p>
    <p>If lines have to be broken, the same text might format like this:</p>
<pre class="ascii-art">       2WERBEH 1WERBEH
  -EH 4WERBEH english3
                 5WERB

   -EH <b>7WERBEH</b> 6WERBEH
                 8WERB

english9 english10 en-
glish11 12WERBEH
13WERBEH

english14 english15
english16

english17 <i data-lt>18WERBEH
20WERBEH english19</i>
</pre>
    <p>Notice that because <samp>HEBREW18</samp> must be read before <samp>english19</samp>,
      it is on the line above <samp>english19</samp>.
      Just breaking the long line from the earlier formatting would not have worked. </p>
    <p>Note also that the first syllable from <samp>english19</samp> might have fit on the previous line,
      but hyphenation of left-to-right words in a right-to-left context, and vice versa,
      is usually suppressed to avoid having to display a hyphen in the middle of a line. </p>
   </div>
   <h3 class="heading settled" data-level="2.4" id="bidi-algo"><span class="secno">2.4. </span><span class="content"> Applying the Bidirectional Reordering Algorithm</span><a class="self-link" href="#bidi-algo"></a></h3>
   <p>User agents that support bidirectional text must apply the Unicode
    bidirectional algorithm to every sequence of inline-level boxes uninterrupted
    by any block boundary or
    “<a href="http://www.unicode.org/reports/tr9/#Bidirectional_Character_Types">bidi type B</a>” <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="forced-paragraph-break">forced paragraph break</dfn>.
    This sequence forms the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="bidi paragraph" id="bidi-paragraph">paragraph</dfn> unit
    in the bidirectional algorithm. </p>
   <h4 class="heading settled" data-level="2.4.1" id="bidi-para-direction"><span class="secno">2.4.1. </span><span class="content"> Bidi Paragraph Embedding Levels</span><a class="self-link" href="#bidi-para-direction"></a></h4>
   <p>In CSS,
    the paragraph embedding level must be set
    (following <a href="http://www.unicode.org/reports/tr9/#HL1">UAX9 clause HL1</a>)
    according to the <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①⑦">direction</a> property of the paragraph’s containing block
    rather than by the heuristic given in steps <a href="http://www.unicode.org/reports/tr9/#P2">P2</a> and <a href="http://www.unicode.org/reports/tr9/#P2">P3</a> of the Unicode algorithm. </p>
   <p>There is, however, one exception:
    when the computed <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②⓪">unicode-bidi</a> of the paragraph’s containing block is <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-plaintext" id="ref-for-valdef-unicode-bidi-plaintext④">plaintext</a>,
    the Unicode heuristics in P2 and P3 are used as described in <a data-link-type="biblio" href="#biblio-uax9">[UAX9]</a>,
    without the HL1 override. </p>
   <h4 class="heading settled" data-level="2.4.2" id="bidi-control-codes"><span class="secno">2.4.2. </span><span class="content"> CSS–Unicode Bidi Control Translation, Text Reordering</span><a class="self-link" href="#bidi-control-codes"></a></h4>
   <p>The final order of characters within each <a data-link-type="dfn" href="#bidi-paragraph" id="ref-for-bidi-paragraph①">bidi paragraph</a> is the
    same as if the bidi control codes had been added as described for <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②①">unicode-bidi</a> (above),
    markup had been stripped, and the resulting character sequence had
    been passed to an implementation of the Unicode bidirectional
    algorithm for plain text that produced the same line-breaks as the
    styled text. </p>
   <p class="note" role="note"> Note that bidi control codes in the source text are still honored,
    and might not correspond to the document tree structure.
    This can split inlines or interfere with bidi start/end control pairing
    in interesting ways. </p>
   <h4 class="heading settled" data-level="2.4.3" id="bidi-atomic-inlines"><span class="secno">2.4.3. </span><span class="content"> Bidi Treatment of Atomic Inlines</span><a class="self-link" href="#bidi-atomic-inlines"></a></h4>
   <p>In this process, <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element">replaced elements</a> with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display" id="ref-for-propdef-display②">display: inline</a> are treated as neutral characters,
    unless their <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②②">unicode-bidi</a> property is either <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-embed" id="ref-for-valdef-unicode-bidi-embed②">embed</a> or <a class="css" data-link-type="maybe" href="#valdef-unicode-bidi-bidi-override" id="ref-for-valdef-unicode-bidi-bidi-override⑤">bidi-override</a>,
    in which case they are treated as strong characters
    in the <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①⑧">direction</a> specified for the element.
    (This is so that, in case the replaced element falls back to rendering inlined text content,
    its bidi effect on the surrounding text is consistent with its replaced rendering.) </p>
   <p>All other atomic inline-level boxes are treated as neutral characters
    always.</p>
   <h4 class="heading settled" data-level="2.4.4" id="bidi-embedding-breaks"><span class="secno">2.4.4. </span><span class="content"> Paragraph Breaks Within Embeddings and Isolates</span><a class="self-link" href="#bidi-embedding-breaks"></a></h4>
   <p>If an inline box is broken around a <a data-link-type="dfn" href="#bidi-paragraph" id="ref-for-bidi-paragraph②">bidi paragraph</a> boundary
    (e.g. if split by a block or <a data-link-type="dfn" href="#forced-paragraph-break" id="ref-for-forced-paragraph-break②">forced paragraph break</a>),
    then the <a href="http://www.unicode.org/reports/tr9/#HL3">HL3</a> bidi control codes assigned to the end of the box
    are also added before the interruption
    and the codes assigned to the start of the box are also added after it.
    (In other words, any embedding levels, isolates, or overrides started by the box
    are closed at the paragraph break and reopened on the other side of it.) </p>
   <div class="example" id="example-334883cc">
    <a class="self-link" href="#example-334883cc"></a> 
    <p>For example, where &lt;BR/> is a <a data-link-type="dfn" href="#forced-paragraph-break" id="ref-for-forced-paragraph-break③">forced paragraph break</a> the bidi ordering is identical between </p>
<pre>&lt;para>...&lt;i1>&lt;i2>...&lt;BR/>...&lt;/i2>&lt;/i1>...&lt;/para></pre>
    <p>and </p>
<pre>&lt;para>...&lt;i1>&lt;i2>...&lt;/i2>&lt;/i1>&lt;BR/>&lt;i1>&lt;i2>...&lt;/i2>&lt;/i1>...&lt;/para></pre>
    <p>for all values of <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②③">unicode-bidi</a> on inline elements &lt;i1> and &lt;i2>. </p>
   </div>
   <p class="note" role="note"> Note that this behavior is applied by CSS for CSS-declared bidi controls
    applied to the box tree;
    it does not apply to Unicode’s bidi formatting controls,
    which are defined to terminate their effect at the end of the bidi paragraph. </p>
   <h4 class="heading settled" data-level="2.4.5" id="bidi-box-model"><span class="secno">2.4.5. </span><span class="content"> Reordering-induced Box Fragmentation</span><a class="self-link" href="#bidi-box-model"></a></h4>
   <p>Since bidi reordering can split apart and reorder text
    that is logically contiguous,
    bidirectional text can cause an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-box" id="ref-for-inline-box">inline box</a> containing such text
    to be split and its fragments reordered within a line. </p>
   <h5 class="heading settled" data-level="2.4.5.1" id="bidi-fragmentation"><span class="secno">2.4.5.1. </span><span class="content"> Conditions of Reordering-induced Box Fragmentation</span><a class="self-link" href="#bidi-fragmentation"></a></h5>
   <p> When bidi reordering would split apart an inline box
    due to intervening content,
    the inline box is considered to be broken into multiple <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragments</a>. <a data-link-type="biblio" href="#biblio-css-break-3">[CSS-BREAK-3]</a> The box is considered to be thus <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment">fragmented</a> if it would be divided by intervening content on an infinitely long line,
    even if line breaking happens to result in both <span id="ref-for-box-fragment①">box fragments</span> being placed adjacent to each other on the line.
    In such cases, the nearest common ancestor of text in the two <span id="ref-for-box-fragment②">box fragments</span> (which determines certain aspects of text formatting
    such as <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#tracking" id="ref-for-tracking">tracking</a> and <a href="https://www.w3.org/TR/css-text/#text-justify-property">justification</a> between the two <span id="ref-for-box-fragment③">box fragments</span>, see <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a>)
    is considered to be the nearest common ancestor of the two <span id="ref-for-box-fragment④">box fragments</span>,
    not the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-box" id="ref-for-inline-box①">inline box</a> itself.
    However, an <span id="ref-for-inline-box②">inline box</span> is not considered to be broken
    into multiple <span id="ref-for-box-fragment⑤">box fragments</span> due to bidi reordering
    if no intervening content would force it to split.
    (These rules maintain the integrity of an <span id="ref-for-inline-box③">inline box</span> where possible,
    while keeping bidi-induced fragmentation stable
    across variations in line-breaking.) </p>
   <div class="example" id="example-951ac452">
    <a class="self-link" href="#example-951ac452"></a> In the following example, where lowercase letters represent LTR letters
    and uppercase letters represent RTL letters,
    bidi reordering causes the <code>&lt;em></code>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-box" id="ref-for-inline-box④">inline box</a> to be divided into two <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment⑥">box fragments</a> separated by text outside the <code>&lt;em></code>. 
    <p>Source code (logical order):</p>
<pre>&lt;p>here is &lt;em>some MIXED&lt;/em> TEXT.&lt;/p></pre>
    <p>Rendering (visual order) in a wide containing block, resulting in two inline box fragments separated by external content:</p>
<pre>here is <em style="border: 1px solid; border-right: 1px dashed red">some </em>TXET <em style="border: 1px solid; border-left: 1px dashed red">DEXIM</em>.</pre>
    <p>Rendering (visual order) in a narrow containing block, resulting in two inline box fragments placed adjacent to each other:</p>
<pre>here is <em style="border: 1px solid; border-right: 1px dashed red">some </em><em style="border: 1px solid; border-left: 1px dashed red">DEXIM</em>
TXET.
</pre>
   </div>
   <div class="example" id="example-f9f11e24">
    <a class="self-link" href="#example-f9f11e24"></a> By contrast, in this example,
    where the mixed-direction phrase is kept together with an isolation,
    only one fragment is generated—<wbr>the surrounding content will never split the <code>&lt;em></code>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inline-box" id="ref-for-inline-box⑤">inline box</a> even inside an infinitely-long containing block: 
    <p>Source code (logical order):</p>
<pre>&lt;p>here is &lt;em dir=rtl>some MIXED&lt;/em> TEXT.&lt;/p></pre>
    <p>Rendering (visual order) in a wide containing block, resulting in one fragment:</p>
<pre>here is <em style="border: 1px solid; ">some DEXIM</em> TXET.</pre>
    <p>Rendering (visual order) in a narrow containing block, resulting in one fragment:</p>
<pre>here is <em style="border: 1px solid; ">some DEXIM</em>
TXET.
</pre>
   </div>
   <h5 class="heading settled" data-level="2.4.5.2" id="bidi-fragment-boxes"><span class="secno">2.4.5.2. </span><span class="content"> Box Model of Reordering-induced Box Fragments</span><a class="self-link" href="#bidi-fragment-boxes"></a></h5>
   <p>For each line box, UAs must take the fragments of each inline box
    and assign the margins, borders and padding in visual order (not logical order).
    The <a data-link-type="dfn" href="#start" id="ref-for-start">start</a>-most fragment on the first line box in which the box appears
    has the <span id="ref-for-start①">start</span> edge’s margin, border, and padding;
    and the end-most fragment on the last line box in which the box appears
    has the <a data-link-type="dfn" href="#end" id="ref-for-end">end</a> edge’s margin, border, and padding.
    For example, in the <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb">horizontal-tb</a> writing mode: </p>
   <ul>
    <li>When the parent’s <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction①⑨">direction</a> property is <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr①">ltr</a>,
      the left-most box fragment on the first line box in which the box appears
      has the left margin, left border and left padding,
      and the right-most box fragment on the last line box in which the box appears
      has the right padding, right border and right margin. 
    <li>When the parent’s <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②⓪">direction</a> property is <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl①">rtl</a>,
      the right-most fragment of the first line box in which the box appears
      has the right padding, right border and right margin,
      and the left-most fragment of the last line box in which the box appears
      has the left margin, left border and left padding. 
   </ul>
   <p>Analogous rules hold for vertical writing modes.</p>
   <p class="note" role="note">The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break">box-decoration-break</a> property can override this behavior
  to draw box decorations on both sides of each fragment. <a data-link-type="biblio" href="#biblio-css-break-3">[CSS-BREAK-3]</a> </p>
   <h2 class="heading settled" data-level="3" id="vertical-modes"><span class="secno">3. </span><span class="content"> Vertical Writing Modes</span><a class="self-link" href="#vertical-modes"></a></h2>
   <p>In addition to extensions to CSS2.1’s support for bidirectional text,
    this module introduces the rules and properties needed to support vertical
    text layout in CSS. </p>
   <h3 class="heading settled" data-level="3.1" id="vertical-intro"><span class="secno">3.1. </span><span class="content"> Introduction to Vertical Writing</span><a class="self-link" href="#vertical-intro"></a></h3>
   <p><em>This subsection is non-normative.</em></p>
   <p>Unlike languages that use the Latin script which are primarily laid out
    horizontally, Asian languages such as Chinese and Japanese can be laid out
    vertically.  The Japanese example below shows the same text laid out
    horizontally and vertically. In the horizontal case, text is read
    from left to right, top to bottom. For the vertical case, the text is
    read top to bottom, right to left.
    Indentation from the left edge in the left-to-right horizontal case
    translates to indentation from the top edge in the top-to-bottom vertical
    case. </p>
   <div class="figure">
    <p><img alt="A comparison of horizontal and vertical Japanese shows that
                 although the lines rotate, the characters remain upright.
                 Some glyphs, however change: a period mark shifts from the
                 bottom left of its glyph box to the top right. Running
                 headers, however, may remain
                 laid out horizontally across the top of the page." src="images/vert-horiz-comparison.png"></p>
    <p class="caption">Comparison of vertical and horizontal Japanese: iBunko application (iOS)</p>
   </div>
   <p class="note" role="note">For Chinese and Japanese lines are ordered either right
    to left or top to bottom, while for Mongolian and Manchu lines are
    ordered left to right.</p>
   <p>The change from horizontal to vertical writing can affect not just the
    layout, but also the typesetting. For example, the position of a punctuation
    mark within its spacing box can change from the horizontal to the
    vertical case, and in some cases alternate glyphs are used. </p>
   <p>Vertical text that includes Latin script text or text from other scripts
    normally displayed horizontally can display that text in a number of
    ways. For example, Latin words can be rotated sideways, or each letter
    can be oriented upright: </p>
   <div class="figure">
    <p><img alt="A dictionary definition for ヴィルス
                 might write the English word &apos;virus&apos; rotated 90° clockwise,
                 but stack the letters of the initialisms &apos;RNA&apos; and &apos;DNA&apos; upright." src="images/vert-latin-layouts.png"></p>
    <p class="caption">Examples of Latin in vertical Japanese: Daijirin Viewer 1.4 (iOS) </p>
   </div>
   <p>In some special cases such as two-digit numbers in dates, text is fit
    compactly into a single vertical character box: </p>
   <div class="figure" id="fig-mac">
    <p><img alt="An excerpt from MacFan shows several possible vertical layouts
                 for numbers: the two-digit month and day are written as
                 horizontal-in-vertical blocks; the years are written with
                 each character upright; except in the English phrase
                 “for Mac 2011”, where the date is rotated to
                 match the rotated Latin." src="images/vert-number-layouts.png"></p>
    <p class="caption">Mac Fan, December 2010, p.49</p>
   </div>
   <p>Layouts often involve a mixture of vertical and horizontal elements: </p>
   <div class="figure">
    <p><img alt="Magazines often mix horizontal and vertical layout; for
                 example, using one orientation for the main article text
                 and a different one for sidebar or illustrative content." src="images/vert-horiz-combination.png"></p>
    <p class="caption">Mixture of vertical and horizontal elements</p>
   </div>
   <p>Vertical text layouts also need to handle bidirectional text layout;
    clockwise-rotated Arabic, for example, is laid out bottom-to-top. </p>
   <h3 class="heading settled" data-level="3.2" id="block-flow"><span class="secno">3.2. </span><span class="content"> Block Flow Direction: the <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode③">writing-mode</a> property</span><a class="self-link" href="#block-flow"></a></h3>
   <table class="def propdef" data-link-for-hint="writing-mode">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-writing-mode">writing-mode</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">horizontal-tb <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> vertical-rl <span id="ref-for-comb-one⑦">|</span> vertical-lr <span id="ref-for-comb-one⑧">|</span> sideways-rl <span id="ref-for-comb-one⑨">|</span> sideways-lr 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>horizontal-tb 
     <tr>
      <th>Applies to:
      <td>All elements except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified value 
     <tr>
      <th>Canonical order:
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>not animatable 
   </table>
   <p>This property specifies whether lines of text are laid out horizontally
    or vertically and the direction in which blocks progress. Possible
    values:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="writing-mode" data-dfn-type="value" data-export id="valdef-writing-mode-horizontal-tb">horizontal-tb</dfn>
    <dd>Top-to-bottom <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction①">block flow direction</a>.
        Both the <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode②">writing mode</a> and the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode">typographic mode</a> are horizontal.
    <dt><dfn class="dfn-paneled css" data-dfn-for="writing-mode" data-dfn-type="value" data-export id="valdef-writing-mode-vertical-rl">vertical-rl</dfn>
    <dd>Right-to-left <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction②">block flow direction</a>.
        Both the <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode③">writing mode</a> and the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode①">typographic mode</a> are vertical.
    <dt><dfn class="dfn-paneled css" data-dfn-for="writing-mode" data-dfn-type="value" data-export id="valdef-writing-mode-vertical-lr">vertical-lr</dfn>
    <dd>Left-to-right <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction③">block flow direction</a>.
        Both the <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode④">writing mode</a> and the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode②">typographic mode</a> are vertical.
    <dt><dfn class="dfn-paneled css" data-dfn-for="writing-mode" data-dfn-type="value" data-export id="valdef-writing-mode-sideways-rl">sideways-rl</dfn>
    <dd>Right-to-left <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction④">block flow direction</a>.
        The <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode⑤">writing mode</a> is vertical, while the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode③">typographic mode</a> is horizontal. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="writing-mode" data-dfn-type="value" data-export id="valdef-writing-mode-sideways-lr">sideways-lr</dfn>
    <dd>Left-to-right <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction⑤">block flow direction</a>.
        The <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode⑥">writing mode</a> is vertical, while the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode④">typographic mode</a> is horizontal. 
   </dl>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode④">writing-mode</a> property specifies the <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction⑥">block flow direction</a>,
    which determines the ordering direction of block-level boxes in a block formatting context;
    the ordering direction of line boxes in a block container that contains inlines;
    the ordering direction of rows in a table; etc.
    By virtue of determining the stacking direction of line boxes,
    the <span class="property" id="ref-for-propdef-writing-mode⑤">writing-mode</span> property also determines whether the line boxes' orientation (and thus the <a data-link-type="dfn" href="#writing-mode" id="ref-for-writing-mode⑦">writing mode</a>)
    is horizontal or vertical.
    The <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation③">text-orientation</a> property then determines how text is laid out within the line box. </p>
   <p>The content of <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element①">replaced elements</a> do not rotate due to the writing mode:
    images and external content such as from <code>&lt;iframe></code>s, for example, remain upright,
    and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#default-object-size" id="ref-for-default-object-size">default object size</a> of 300px×150px does not re-orient.
    However embedded replaced content involving text
    (such as MathML content or form elements)
    should match the replaced element’s writing mode and line orientation
    if the UA supports such a vertical writing mode for the replaced content. </p>
   <div class="example" id="example-26ec58a4">
    <a class="self-link" href="#example-26ec58a4"></a> 
    <p>In the following example, two block elements (1 and 3) separated
      by an image (2) are presented in various flow writing modes.</p>
    <p>Here is a diagram of horizontal writing mode (<code>writing-mode: horizontal-tb</code>):</p>
    <p><img alt="Diagram of horizontal layout: blocks 1, 2, and 3 are stacked top-to-bottom" height="300" src="images/horizontal.png" width="219"></p>
    <p>Here is a diagram for the right-to-left vertical writing mode commonly
      used in East Asia (<code>writing-mode: vertical-rl</code>):</p>
    <p><img alt="Diagram of a right-to-left vertical layout: blocks 1, 2,
                  and 3 are arranged side by side from right to left" height="191" src="images/vertical-rl.png" width="297"></p>
    <p>And finally, here is a diagram for the left-to-right vertical
      writing mode used for Manchu and Mongolian (<code>writing-mode: vertical-lr</code>):</p>
    <p><img alt="Diagram of left-to-right vertical layout: blocks 1, 2,
                  and 3 are arranged side by side from left to right" height="191" src="images/vertical-lr.png" width="300"></p>
   </div>
   <div class="example" id="example-fb72ee40">
    <a class="self-link" href="#example-fb72ee40"></a> 
    <p>In the following example, some form controls are rendered inside
      a block with <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl">vertical-rl</a> writing mode. The form controls are
      rendered to match the writing mode. </p>
<pre>&lt;style>
  form { writing-mode: vertical-rl; }
&lt;/style>
...
&lt;form>
&lt;p>&lt;label>姓名　&lt;input value="艾俐俐">&lt;/label>
&lt;p>&lt;label>语言　&lt;select>&lt;option>English
                       &lt;option>français
                       &lt;option>فارسی
                       &lt;option>中文
                       &lt;option>日本語&lt;/select>&lt;/label>
&lt;/form></pre>
    <p><img alt="Screenshot of vertical layout: the input element is
                laid lengthwise from top to bottom and its contents
                rendered in a vertical typographic mode, matching the
                labels outside it. The drop-down selection control
                after it slides out to the side (towards the after
                edge of the block) rather than downward as it would
                in horizontal writing modes." src="images/vertical-form.png"></p>
   </div>
   <p>If a box has a different <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode⑥">writing-mode</a> value than its parent box
    (i.e. nearest ancestor without <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display" id="ref-for-propdef-display③">display: contents</a>): </p>
   <ul>
    <li>If the box would otherwise become an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#in-flow" id="ref-for-in-flow">in-flow</a> box
     with a computed <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display" id="ref-for-propdef-display④">display</a> of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline" id="ref-for-valdef-display-inline①">inline</a>,
     its <span class="property" id="ref-for-propdef-display⑤">display</span> computes instead to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block">inline-block</a>. 
    <li>If the box is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container②">block container</a>,
     then it establishes an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#independent-formatting-context" id="ref-for-independent-formatting-context">independent</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-formatting-context" id="ref-for-block-formatting-context">block formatting context</a>. 
    <li>More generally, if its specified <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#inner-display-type" id="ref-for-inner-display-type">inner display type</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-flow" id="ref-for-valdef-display-flow">flow</a>,
     then its computed <span id="ref-for-inner-display-type①">inner display type</span> becomes <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-flow-root" id="ref-for-valdef-display-flow-root">flow-root</a>. <a data-link-type="biblio" href="#biblio-css-display-3">[CSS-DISPLAY-3]</a> 
   </ul>
   <div class="note" id="embedded-svg-inheritance" role="note">
    <a class="self-link" href="#embedded-svg-inheritance"></a> 
    <p>As all other inherited CSS properties do,
    the <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode⑦">writing-mode</a> property inherits to SVG elements inlined
    (rather than linked) into the source document.
    This could cause unintentional side effects when, for example,
    an SVG image designed only for horizontal flow was embedded into a vertical flow document. </p>
    <p>Authors can prevent this from happening by adding the following rule: </p>
    <div class="example" id="example-5db07892">
     <a class="self-link" href="#example-5db07892"></a> 
<pre>svg { writing-mode: initial; }</pre>
    </div>
   </div>
   <h4 class="heading settled" data-level="3.2.1" id="svg-writing-mode"><span class="secno">3.2.1. </span><span class="content"> Obsolete SVG1.1 <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode⑧">writing-mode</a> Values</span><a class="self-link" href="#svg-writing-mode"></a></h4>
   <p>SVG1.1 <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a> defines some additional values: <span class="css">lr</span>, <span class="css">lr-tb</span>, <span class="css">rl</span>, <span class="css">rl-tb</span>, <span class="css">tb</span>, and <span class="css">tb-rl</span>. </p>
   <p>These values are <em>obsolete</em> in any context except SVG1 documents
    and are therefore <em>optional</em> for non-SVG UAs. </p>
   <h5 class="no-toc heading settled" data-level="3.2.1.1" id="svg-writing-mode-css"><span class="secno">3.2.1.1. </span><span class="content"> Supporting SVG1.1 <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode⑨">writing-mode</a> values in CSS syntax</span><a class="self-link" href="#svg-writing-mode-css"></a></h5>
   <p>UAs that wish to support these values in the context of CSS
    must compute them as follows: </p>
   <table class="data">
    <caption>Mapping of Obsolete SVG1.1 <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⓪">writing-mode</a> values to modern CSS</caption>
    <thead>
     <tr>
      <th>Specified
      <th>Computed
    <tbody>
     <tr>
      <td><span class="css">lr</span>
      <td rowspan="4"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb①">horizontal-tb</a>
     <tr>
      <td><span class="css">lr-tb</span>
     <tr>
      <td><span class="css">rl</span>
     <tr>
      <td><span class="css">rl-tb</span>
     <tr>
      <td><span class="css">tb</span>
      <td rowspan="2"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl①">vertical-rl</a>
     <tr>
      <td><span class="css">tb-rl</span>
   </table>
   <p class="note" role="note">The SVG1.1 values were also present
    in an older of the CSS <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①①">writing-mode</a> specification,
    which is obsoleted by this specification.
    The additional <span class="css">tb-lr</span> value of that revision
    is replaced by <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr">vertical-lr</a>. </p>
   <h5 class="no-toc heading settled" data-level="3.2.1.2" id="svg-writing-mode-markup"><span class="secno">3.2.1.2. </span><span class="content"> Supporting SVG1.1 <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①②">writing-mode</a> values in presentational attributes</span><a class="self-link" href="#svg-writing-mode-markup"></a></h5>
   <p>In order to support legacy content with presentational attributes,
  and to allow authors to create documents that support older clients,
  SVG UAs must add the following style sheet rules to their default UA stylesheet: </p>
<pre class="highlight"><c- n>@namespace</c-> svg <c- s>"http://www.w3.org/2000/svg"</c-><c- p>;</c->
<c- f>svg|*[writing-mode=lr], svg|*[writing-mode=lr-tb],</c->
<c- f>svg|*[writing-mode=rl], svg|*[writing-mode=rl-tb] </c-><c- p>{</c->
  <c- k>writing-mode</c-><c- p>:</c-> horizontal-tb<c- p>;</c-> <c- p>}</c->
<c- f>svg|*[writing-mode=tb], svg|*[writing-mode=tb-rl] </c-><c- p>{</c->
  <c- k>writing-mode</c-><c- p>:</c-> vertical-rl<c- p>;</c-> <c- p>}</c->
</pre>
   <div class="note" role="note">
     Authors who wish to create forwards and backwards-compatible SVG content
    in CSS syntax can use the CSS forwards-compatible parsing rules to do so,
    e.g. 
<pre>svg|text { writing-mode: tb; writing-mode: vertical-rl; }</pre>
   </div>
   <h2 class="heading settled" data-level="4" id="inline-alignment"><span class="secno">4. </span><span class="content"> Inline-level Alignment</span><a class="self-link" href="#inline-alignment"></a></h2>
   <p>When different kinds of inline-level content are placed together on a
    line, the baselines of the content and the settings of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a> property control how they are aligned in the transverse direction of the
    line box. This section discusses what baselines are, how to find them,
    and how they are used together with the <span class="property" id="ref-for-propdef-vertical-align①">vertical-align</span> property to
    determine the alignment of inline-level content. </p>
   <h3 class="heading settled" data-level="4.1" id="intro-baselines"><span class="secno">4.1. </span><span class="content"> Introduction to Baselines</span><a class="self-link" href="#intro-baselines"></a></h3>
   <p><em>This section is non-normative.</em></p>
   <p>A <dfn data-dfn-type="dfn" data-noexport id="baseline">baseline<a class="self-link" href="#baseline"></a></dfn> is a line along the <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis">inline axis</a> of a line box
    along which individual glyphs of text are aligned. Baselines guide the
    design of glyphs in a font (for example, the bottom of most alphabetic
    glyphs typically align with the alphabetic baseline), and they guide
    the alignment of glyphs from different fonts or font sizes when typesetting. </p>
   <div class="figure">
    <p><img alt="Picture of alphabetic text in two font sizes with the baseline and em-boxes" src="images/alphabetic-baseline-in-two-font-sizes.svg" width="480"></p>
    <p class="caption">Alphabetic text in two font sizes with the baseline and em-boxes</p>
   </div>
   <p>Different writing systems prefer different baseline tables.</p>
   <div class="figure">
    <p><img alt="Latin prefers the alphabetic baseline, on top of which most
                 letters rest, though some have descenders that dangle below it.
                 Indic scripts are sometimes typeset with a hanging baseline,
                 since their glyph shapes appear to be hanging from a
                 horizontal line.
                 Han-based systems, whose glyphs are designed to fill a square,
                 tend to align on their bottoms." src="images/script-preferred-baselines.gif"></p>
    <p class="caption">Preferred baselines in various writing systems</p>
   </div>
   <p>A well-constructed font contains a <dfn data-dfn-type="dfn" data-noexport id="baseline-table">baseline table<a class="self-link" href="#baseline-table"></a></dfn>, which
    indicates the position of one or more baselines within the font’s
    design coordinate space. (The design coordinate space is scaled with
    the font size.) </p>
   <div class="figure">
    <p><img alt src="images/baselines.gif"></p>
    <p class="caption">In a well-designed mixed-script font, the glyphs are
    positioned in the coordinate space to harmonize with one another
    when typeset together. The baseline table is then constructed to
    match the shape of the glyphs, each baseline positioned to match
    the glyphs from its preferred scripts.</p>
   </div>
   <p>The baseline table is a property of the font, and the positions
    of the various baselines apply to all glyphs in the font. </p>
   <p>Different baseline tables can be provided for alignment in
    horizontal and vertical text. UAs should use the vertical
    tables in vertical <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode⑤">typographic modes</a> and the horizontal tables
    otherwise. </p>
   <h3 class="heading settled" data-level="4.2" id="text-baselines"><span class="secno">4.2. </span><span class="content"> Text Baselines</span><a class="self-link" href="#text-baselines"></a></h3>
   <p>In this specification, only the following baselines are considered: </p>
   <dl>
    <dt>alphabetic
    <dd>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="alphabetic-baseline">alphabetic baseline</dfn>, which typically aligns with the
      bottom of uppercase Latin glyphs. 
    <dt>central
    <dd>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="central-baseline">central baseline</dfn>, which typically crosses the center
      of the em box. If the font is missing this baseline,
      it is assumed to be halfway between the ascender (<a data-link-type="dfn" href="#over" id="ref-for-over">over</a>)
      and descender (<a data-link-type="dfn" href="#under" id="ref-for-under">under</a>) edges of the em box. 
   </dl>
   <p>In vertical <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode⑥">typographic mode</a>, the <a data-link-type="dfn" href="#central-baseline" id="ref-for-central-baseline">central baseline</a> is used as the
    dominant baseline when <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation④">text-orientation</a> is <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed">mixed</a> or <a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright">upright</a>.
    Otherwise the <a data-link-type="dfn" href="#alphabetic-baseline" id="ref-for-alphabetic-baseline">alphabetic baseline</a> is used. </p>
   <p class="note" role="note">A future CSS module will deal with baselines in more
    detail and allow the choice of other dominant baselines and alignment
    options.</p>
   <h3 class="heading settled" data-level="4.3" id="replaced-baselines"><span class="secno">4.3. </span><span class="content"> Atomic Inline Baselines</span><a class="self-link" href="#replaced-baselines"></a></h3>
   <p>If an <a href="https://www.w3.org/TR/CSS2/visuren.html#inline-boxes">atomic
    inline</a> (such as an inline-block, inline-table, or replaced inline element)
    does not have a baseline,
    then the UA synthesizes a baseline table thus: </p>
   <dl>
    <dt>alphabetic
    <dd>The alphabetic baseline is assumed to be at the <a data-link-type="dfn" href="#under" id="ref-for-under①">under</a> margin edge.
    <dt>central
    <dd>The central baseline is assumed to be halfway between the <a data-link-type="dfn" href="#under" id="ref-for-under②">under</a> and <a data-link-type="dfn" href="#over" id="ref-for-over①">over</a> margin edges of the box. 
   </dl>
   <p class="note" role="note">The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align②">vertical-align</a> property in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> defines the baseline of
    inline-table and inline-block boxes with some exceptions. </p>
   <h3 class="heading settled" data-level="4.4" id="baseline-alignment"><span class="secno">4.4. </span><span class="content"> Baseline Alignment</span><a class="self-link" href="#baseline-alignment"></a></h3>
   <p>The <dfn data-dfn-type="dfn" data-noexport id="dominant-baseline">dominant baseline<a class="self-link" href="#dominant-baseline"></a></dfn> (which <a href="#text-baselines">can change</a> based on the <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode⑦">typographic mode</a>)
    is used in CSS for alignment in two cases: </p>
   <ul>
    <li><strong>Aligning glyphs from different fonts within the same inline box.</strong> The glyphs are aligned by matching up the positions of the dominant
      baseline in their corresponding fonts. 
    <li>
     <strong>Aligning a child inline-level box within its parent.</strong> For the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align③">vertical-align</a> value of <span class="css">baseline</span>, child is aligned to
      the parent by matching the parent’s dominant baseline to the same
      baseline in the child. (E.g. if the parent’s dominant baseline is
      alphabetic, then the child’s alphabetic baseline is matched to the
      parent’s alphabetic baseline, even if the child’s dominant baseline
      is something else.)
      For values of <span class="css">sub</span>, <span class="css">super</span>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-3/#length-value" id="ref-for-length-value">&lt;length></a>, and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-3/#percentage-value" id="ref-for-percentage-value">&lt;percentage></a>, the baselines are aligned as for <span class="css">baseline</span>,
      but the child is shifted according to the offset given by its <span class="property" id="ref-for-propdef-vertical-align④">vertical-align</span> value. 
     <div class="example" id="example-edb77cae">
      <a class="self-link" href="#example-edb77cae"></a> 
      <p>Given following sample markup: </p>
<pre>&lt;p>&lt;span class="outer">Ap &lt;span class="inner"><i data-lt>ji</i>&lt;/span>&lt;/span>&lt;/p></pre>
      <p>And the following style rule: </p>
<pre>span.inner { font-size: .75em; }</pre>
      <p>The baseline tables of the parent (<code>.outer</code>) and the child
          (<code>.inner</code>) will not match up due to the font size difference.
          Since the dominant baseline is the alphabetic baseline, the child box
          is aligned to its parent by matching up their alphabetic baselines. </p>
      <div class="figure">
       <p><img alt src="images/baseline-align-sizes.gif"> </p>
      </div>
     </div>
     <div class="example" id="example-3b107e11">
      <a class="self-link" href="#example-3b107e11"></a> 
      <p>If we assign <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align⑤">vertical-align: super</a> to the <code>.inner</code> element from the example above, the same rules are used to align
        the <code>.inner</code> child to its parent; the only difference
        is in addition to the baseline alignment, the child is shifted to
        the superscript position. </p>
<pre>span.inner { vertical-align: super; font-size: .75em; }</pre>
      <div class="figure">
       <p><img alt="In this example, the resulting alignment is equivalent
                     to shifting the parent baseline table upwards by the
                     superscript offset, and then aligning the child’s
                     alphabetic baseline to the shifted position of the
                     parent’s alphabetic baseline." src="images/baseline-align-super.gif"> </p>
      </div>
     </div>
   </ul>
   <h2 class="heading settled" data-level="5" id="intro-text-layout"><span class="secno">5. </span><span class="content"> Introduction to Vertical Text Layout</span><a class="self-link" href="#intro-text-layout"></a></h2>
   <p>Each writing system has one or more native orientations. Modern scripts
    can therefore be classified into three orientational categories:</p>
   <dl>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="horizontal-only">horizontal-only</dfn> 
    <dd>Scripts that have horizontal, but not vertical, native orientation.
        Includes: Latin, Arabic, Hebrew, Devanagari 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="vertical-only">vertical-only</dfn> 
    <dd>Scripts that have vertical, but not horizontal, native orientation.
        Includes: Mongolian, Phags Pa 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="bi-orientational">bi-orientational</dfn> 
    <dd>Scripts that have both vertical and horizontal native orientation.
        Includes: Han, Hangul, Japanese Kana 
   </dl>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="vertical-script">vertical script</dfn> is one that has a native vertical orientation:
    i.e. one that is either <a data-link-type="dfn" href="#vertical-only" id="ref-for-vertical-only">vertical-only</a> or that is <a data-link-type="dfn" href="#bi-orientational" id="ref-for-bi-orientational">bi-orientational</a>.
    A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="horizontal-script">horizontal script</dfn> is one that has a native horizontal orientation:
    i.e. one that is either <a data-link-type="dfn" href="#horizontal-only" id="ref-for-horizontal-only">horizontal-only</a> or that is <span id="ref-for-bi-orientational①">bi-orientational</span>.
    (See <a href="#script-orientations">Appendix A</a> for a categorization of
    scripts by native orientation.) </p>
   <div class="figure">
    <p><img alt="A Venn diagram of these distinctions would show two circles:
                     one labelled &apos;vertical&apos;, the other &apos;horizontal&apos;. The overlapped
                     region would represent the bi-orientational scripts, while
                     horizontal-only and vertical-only scripts would occupy their
                     respective circles&apos; exclusive regions." src="diagrams/script-orientations.png"> </p>
   </div>
   <p>In modern typographic systems, all glyphs are assigned a horizontal
    orientation, which is used when laying out text horizontally.
    To lay out vertical text, the UA needs to transform the text from its
    horizontal orientation. This transformation is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="bi-orientational transform" data-noexport id="bi-orientational-transform">bi-orientational
    transform</dfn>, and there are two types: </p>
   <dl>
    <dt>rotate
    <dd>Rotate the glyph from horizontal to vertical <a href="diagrams/glyph-right.svg"> <img alt="Rotate the glyph from horizontal to vertical" class="figure" src="diagrams/glyph-right.png"></a> 
    <dt>translate
    <dd>Translate the glyph from horizontal to vertical <a href="diagrams/glyph-upright.svg"> <img alt="Translate the glyph from horizontal to vertical" class="figure" src="diagrams/glyph-upright.png"></a> 
   </dl>
   <p>Scripts with a native vertical orientation have an
    intrinsic <a data-link-type="dfn" href="#bi-orientational-transform" id="ref-for-bi-orientational-transform">bi-orientational transform</a>, which orients them correctly in
    vertical text: most CJK (Chinese/Japanese/Korean) characters translate,
    that is, they are always upright. Characters from other scripts,
    such as Mongolian, rotate. </p>
   <p>Scripts without a native vertical orientation can be either rotated
    (set sideways) or translated (set upright): the transform used is a
    stylistic preference depending on the text’s usage, rather than a
    matter of correctness.
    The <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑤">text-orientation</a> property’s <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed①">mixed</a> and <a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright①">upright</a> values
    are provided to specify rotation vs. translation of <a data-link-type="dfn" href="#horizontal-only" id="ref-for-horizontal-only①">horizontal-only</a> text. </p>
   <h3 class="heading settled" data-level="5.1" id="text-orientation"><span class="secno">5.1. </span><span class="content"> Orienting Text: the <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑥">text-orientation</a> property</span><a class="self-link" href="#text-orientation"></a></h3>
   <table class="def propdef" data-link-for-hint="text-orientation">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-orientation">text-orientation</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">mixed <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> upright <span id="ref-for-comb-one①①">|</span> sideways 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>mixed 
     <tr>
      <th>Applies to:
      <td>all elements except table row groups, rows, column groups, and columns 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified value 
     <tr>
      <th>Canonical order:
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>not animatable 
   </table>
   <p>This property specifies the orientation of text within a line.
    Current values only have an effect in vertical <a data-link-type="dfn" href="#typographic-mode" id="ref-for-typographic-mode⑧">typographic modes</a>:
    the property has no effect on boxes in horizontal <span id="ref-for-typographic-mode⑨">typographic modes</span>. </p>
   <p>Values have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-orientation" data-dfn-type="value" data-export id="valdef-text-orientation-mixed">mixed</dfn>
    <dd>
     <p>In vertical writing modes, <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit">typographic character units</a> from horizontal-only scripts
      are <a href="#typeset-sideways">typeset sideways</a>,
      i.e. 90° clockwise from their standard orientation in horizontal text. <span id="ref-for-typographic-character-unit①">Typographic character units</span> from vertical scripts
      are typeset with their intrinsic orientation.
      See <a href="#vertical-orientations">Vertical Orientations</a> for further details. </p>
     <p>This value is typical for layout of dominantly vertical-script text. </p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-orientation" data-dfn-type="value" data-export id="valdef-text-orientation-upright">upright</dfn>
    <dd>
     <p>In vertical writing modes, <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit②">typographic character units</a> from horizontal-only scripts
      are <a href="#typeset-upright">typeset upright</a>,
      i.e. in their standard horizontal orientation. <span id="ref-for-typographic-character-unit③">Typographic character units</span> from vertical scripts
      are typeset with their intrinsic orientation and shaped normally.
      See <a href="#vertical-orientations">Vertical Orientations</a> for further details. </p>
     <p>This value causes the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value">used value</a> of <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②①">direction</a> to be <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr②">ltr</a>,
      and for the purposes of bidi reordering,
      causes all characters to be treated as strong LTR. </p>
     <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value①">used value</a>, rather than the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①">computed value</a>,
      of <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②②">direction</a> is influenced
      so that <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl②">rtl</a> can inherit properly
      into any descendants
      (such as the contents of a <a data-link-type="dfn" href="#horizontal-writing-mode" id="ref-for-horizontal-writing-mode">horizontal</a> inline-block)
      where this directional override does not apply.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-orientation" data-dfn-type="value" data-export id="valdef-text-orientation-sideways">sideways</dfn>
    <dd>
     <p>In vertical writing modes,
      this causes all text to be <a href="#typeset-sideways">typeset sideways</a>,
      as if in a horizontal layout, but rotated 90° clockwise. </p>
   </dl>
   <div class="figure" id="fig-text-orientation">
    <table class="data">
     <tbody>
      <tr>
       <td> <img alt="text-orientation: mixed" height="160" src="images/text-orientation-vr.png" width="64"> 
       <td> <img alt="text-orientation: upright" height="160" src="images/text-orientation-up.png" width="64"> 
       <td> <img alt="text-orientation: sideways" height="160" src="images/text-orientation-sr.png" width="64"> 
      <tr>
       <td style="text-align:center"><a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed②">mixed</a>
       <td style="text-align:center"><a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright②">upright</a>
       <td style="text-align:center"><a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways">sideways</a>
    </table>
    <p class="caption"><a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑦">text-orientation</a> values (<a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①③">writing-mode</a> is <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl②">vertical-rl</a>)</p>
   </div>
   <p class="note" role="note">Changing the value of this property may affect inline-level alignment.
    Refer to <a href="#text-baselines">Text Baselines</a> for more details.</p>
   <p>UAs may accept <dfn class="css" data-dfn-for="text-orientation" data-dfn-type="value" data-export id="valdef-text-orientation-sideways-right">sideways-right<a class="self-link" href="#valdef-text-orientation-sideways-right"></a></dfn> as a value that computes to <a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways①">sideways</a> if needed for backward compatibility reasons.</p>
   <div class="note" role="note">
     As of writing, major implementations do not support
    the automatic LTR treatment of RTL characters for <a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright③">upright</a> typesetting.
    In such cases, authors may need to explicitly specify <a class="property" data-link-type="propdesc" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②④">unicode-bidi</a> and <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②③">direction</a> as in the following example: 
<pre>.vertical-upright-hebrew {
    writing-mode: vertical-rl;
    text-orientation: upright;
    unicode-bidi: bidi-override;
    direction: ltr;
}
</pre>
   </div>
   <h4 class="heading settled" data-level="5.1.1" id="vertical-font-features"><span class="secno">5.1.1. </span><span class="content"> Vertical Typesetting and Font Features</span><a class="self-link" href="#vertical-font-features"></a></h4>
   <p>When typesetting text in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl③">vertical-rl</a> and <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr①">vertical-lr</a> modes,
  text is typeset either “upright” or “sideways” as defined below: </p>
   <dl>
    <dt id="typeset-upright"><a class="self-link" href="#typeset-upright"></a>upright typesetting 
    <dd>
      <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit④">Typographic character units</a> are individually typeset upright
      in vertical lines with vertical font metrics.
      The UA must synthesize vertical font metrics for fonts that lack them.
      (This specification does not define heuristics for synthesizing such metrics.)
      Additionally, font features (such as alternate glyphs and other transformation)
      intended for use in vertical typesetting must be used.
      (E.g. the OpenType <span class="css">vert</span> feature must be enabled.)
      Furthermore, characters from horizontal cursive scripts (such as Arabic)
      are shaped in their isolated forms when typeset upright. 
     <p class="note" role="note">Note that even when typeset “upright”,
        some glyphs should appear rotated.
        For example, dashes and enclosing punctuation
        should be oriented relative to the <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis①">inline axis</a>.
        In OpenType, this is typically handled by glyph substitution,
        although not all fonts have alternate glyphs for all relevant codepoints.
        (East Asian fonts usually provide alternates for East Asian codepoints,
        but Western fonts typically lack any vertical typesetting features
        and East Asian fonts typically lack vertical substitutions for Western codepoints.)
        Unicode published draft data on which characters should appear sideways
        as the SVO property in <a href="http://www.unicode.org/reports/tr50/tr50-6.Orientation.txt">this data file</a>;
        however, this property has been abandoned for the current revision of <a data-link-type="biblio" href="#biblio-uax50">[UAX50]</a>. </p>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit⑤">Typographic character units</a> which are classified
      as <code>Tr</code> or <code>Tu</code> in <a data-link-type="biblio" href="#biblio-uax50">[UAX50]</a> are expected to have alternate glyphs or positioning for typesetting upright in vertical text.
      In the case of <code>Tr</code> <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#character" id="ref-for-character">characters</a>,
      if such vertical alternate glyphs are missing from the font,
      the UA <em>may wish to</em> <a data-link-type="biblio" href="#biblio-rfc6919">[RFC6919]</a> (but is not expected to)
      synthesize the missing glyphs by <a href="#typeset-sideways">typesetting them sideways</a> etc. </p>
    <dt id="typeset-sideways"><a class="self-link" href="#typeset-sideways"></a>sideways typesetting 
    <dd> <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit⑥">Typographic character units</a> typeset as a run
      rotated 90° clockwise from their upright orientation,
      using horizontal metrics and composition,
      and vertical typesetting features are not used.
      However, if the font has features meant to be enabled
      for sideways text that is typeset in vertical lines
      (e.g. to adjust brush stroke angles or alignment),
      those features are used.
      (An example of such a feature would be the proposed <a href="http://blogs.adobe.com/CCJKType/2013/08/tale-of-three-features.html"><code>vrtr</code> OpenType font feature</a>.) 
   </dl>
   <h4 class="heading settled" data-level="5.1.2" id="vertical-orientations"><span class="secno">5.1.2. </span><span class="content"> Mixed Vertical Orientations</span><a class="self-link" href="#vertical-orientations"></a></h4>
   <p> <a data-link-type="biblio" href="#biblio-uax50">[UAX50]</a> defines the <code>Vertical_Orientation</code> property
    for the default glyph orientation of mixed-orientation vertical text.
    When <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑧">text-orientation</a> is <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed③">mixed</a>,
    the UA must determine the orientation of each <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit⑦">typographic character unit</a> by its <code>Vertical_Orientation</code> property: <a href="#typeset-upright">typeseting it upright</a> if its orientation property is <code>U</code>, <code>Tu</code>, or <code>Tr</code>;
    or <a href="#typeset-sideways">typesetting it sideways</a> (90° clockwise from horizontal)
    if its orientation property is <code>R</code>. </p>
   <p class="note" role="note"> Note that UAX50 does not handle scripts that rotate -90° in vertical contexts,
    so they will not be typeset correctly with <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed④">mixed</a> orientation.
    Use <a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr">sideways-lr</a> for such scripts. </p>
   <p class="note" role="note"> The OpenType <span class="css">vrt2</span> feature, which is intended for mixed-orientation typesetting,
    is not used by CSS.
    It delegates the responsibility for orienting glyphs to the font designer.
    CSS instead dictates the orientation through <a data-link-type="biblio" href="#biblio-uax50">[UAX50]</a> and orients glyphs by typesetting them sideways or upright as appropriate. </p>
   <h4 class="heading settled" data-level="5.1.3" id="glyph-orientation"><span class="secno">5.1.3. </span><span class="content"> Obsolete: the SVG1.1 <a class="property" data-link-type="propdesc" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical">glyph-orientation-vertical</a> property</span><a class="self-link" href="#glyph-orientation"></a></h4>
   <table class="def propdef" data-link-for-hint="glyph-orientation-vertical">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-glyph-orientation-vertical">glyph-orientation-vertical</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> 0deg <span id="ref-for-comb-one①③">|</span> 90deg <span id="ref-for-comb-one①④">|</span> 0 <span id="ref-for-comb-one①⑤">|</span> 90 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>n/a 
     <tr>
      <th>Applies to:
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>n/a 
     <tr>
      <th>Canonical order:
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>n/a 
   </table>
   <p>Some SVG user agents will need to process documents containing
  the obsolete SVG <a class="property" data-link-type="propdesc" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical①">glyph-orientation-vertical</a> property,
  which was defined to accept an <span class="css">auto</span> keyword
  as well as <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#angle-value" id="ref-for-angle-value" title="Expands to: turn | rad | grad | deg">&lt;angle></a> and <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value">&lt;integer></a> values representing multiples of 90°.
  While supporting this property is <em>optional</em>,
  UAs that do so must alias <span class="property" id="ref-for-propdef-glyph-orientation-vertical②">glyph-orientation-vertical</span> as a shorthand of <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation⑨">text-orientation</a> as follows:</p>
   <table class="data">
    <thead>
     <tr>
      <th>Shorthand <a class="property" data-link-type="propdesc" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical③">glyph-orientation-vertical</a> value 
      <th>Longhand <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①⓪">text-orientation</a> value 
    <tbody>
     <tr>
      <td><span class="css">auto</span> 
      <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed⑤">mixed</a> 
     <tr>
      <td><span class="css">0deg</span> 
      <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright④">upright</a> 
     <tr>
      <td><span class="css">0</span> 
      <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright⑤">upright</a> 
     <tr>
      <td><span class="css">90deg</span> 
      <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways②">sideways</a> 
     <tr>
      <td><span class="css">90</span> 
      <td><a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways③">sideways</a> 
   </table>
   <p>UAs must ignore and treat as invalid
  any other values for the <a class="property" data-link-type="propdesc" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical④">glyph-orientation-vertical</a> property;
  and treat as invalid the <a class="property" data-link-type="propdesc">glyph-orientation-horizontal</a> property
  in its entirety.</p>
   <p class="note" role="note"><span>Note:</span> The <span class="css">180deg</span> and <span class="css">270deg</span> values,
  the radian and gradian values,
  and the <a class="property" data-link-type="propdesc">glyph-orientation-horizontal</a> property
  are not mapped because they have no known use cases
  nor significant amounts of dependent content,
  and are therefore not part of CSS,
  and have been likewise dropped from SVG.</p>
   <h2 class="heading settled" data-level="6" id="abstract-box"><span class="secno">6. </span><span class="content"> Abstract Box Terminology</span><a class="self-link" href="#abstract-box"></a></h2>
   <p>CSS2.1 <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> defines the box layout model of CSS in detail,
    but only for the <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb②">horizontal-tb</a> writing mode. Layout is analogous
    in writing modes other than <span class="css" id="ref-for-valdef-writing-mode-horizontal-tb③">horizontal-tb</span>; however directional
    and dimensional terms in CSS2.1 must be abstracted and remapped
    appropriately. </p>
   <p>This section defines abstract directional and dimensional terms and
    their mappings in order to define box layout for other writing modes,
    and to provide terminology for future specs to define their layout
    concepts abstractly. (The next section explains how to apply them to
    CSS2.1 layout calculations and how to handle <a href="#orthogonal-flows">orthogonal flows</a>.)
    Although they derive from the behavior of text, these abstract
    mappings exist even for boxes that do not contain any line boxes:
    they are calculated directly from the values of the <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①④">writing-mode</a> and <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②④">direction</a> properties. </p>
   <p>There are three sets of directional terms in CSS: </p>
   <dl>
    <dt><dfn data-dfn-type="dfn" data-export id="physical">physical<a class="self-link" href="#physical"></a></dfn> 
    <dd>Interpreted relative to the page, independent of writing mode.
    The <dfn data-dfn-type="dfn" data-export data-lt="physical direction" id="physical-direction">physical directions<a class="self-link" href="#physical-direction"></a></dfn> are <dfn data-dfn-type="dfn" data-export data-lt="physical left | left" id="physical-left">left<a class="self-link" href="#physical-left"></a></dfn>, <dfn data-dfn-type="dfn" data-export data-lt="physical right | right" id="physical-right">right<a class="self-link" href="#physical-right"></a></dfn>, <dfn data-dfn-type="dfn" data-export data-lt="physical top | top" id="physical-top">top<a class="self-link" href="#physical-top"></a></dfn>, and <dfn data-dfn-type="dfn" data-export data-lt="physical bottom | bottom" id="physical-bottom">bottom<a class="self-link" href="#physical-bottom"></a></dfn>. 
    <dt><dfn data-dfn-type="dfn" data-export id="flow-relative"><a href="#logical-directions">flow-relative</a><a class="self-link" href="#flow-relative"></a></dfn> 
    <dd>Interpreted relative to the flow of content.
    The flow-relative directions are <a data-link-type="dfn" href="#start" id="ref-for-start②">start</a> and <a data-link-type="dfn" href="#end" id="ref-for-end①">end</a>,
    or <a data-link-type="dfn" href="#block-start" id="ref-for-block-start">block-start</a>, <a data-link-type="dfn" href="#block-end" id="ref-for-block-end">block-end</a>, <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start">inline-start</a>, and <a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end">inline-end</a> if the dimension is also ambiguous. 
    <dt><dfn data-dfn-type="dfn" data-export id="line-relative"><a href="#line-directions">line-relative</a><a class="self-link" href="#line-relative"></a></dfn> 
    <dd>Interpreted relative to the orientation of the line box.
    The line-relative directions are <a data-link-type="dfn" href="#line-left" id="ref-for-line-left②">line-left</a>, <a data-link-type="dfn" href="#line-right" id="ref-for-line-right②">line-right</a>, <a data-link-type="dfn" href="#line-over" id="ref-for-line-over">line-over</a>, and <a data-link-type="dfn" href="#line-under" id="ref-for-line-under">line-under</a>. 
   </dl>
   <p>The <dfn data-dfn-type="dfn" data-export id="physical-dimensions">physical dimensions<a class="self-link" href="#physical-dimensions"></a></dfn> are <dfn data-dfn-type="dfn" data-export id="width">width<a class="self-link" href="#width"></a></dfn> and <dfn data-dfn-type="dfn" data-export id="height">height<a class="self-link" href="#height"></a></dfn>,
    which correspond to measurements along the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="x-axis|horizontal axis" id="x-axis">x-axis</dfn> (<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="horizontal-dimension">horizontal dimension</dfn>) and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="y-axis|vertical axis" id="y-axis">y-axis</dfn> (<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="vertical-dimension">vertical dimension</dfn>),
    respectively. <a href="#abstract-axes">Abstract dimensions</a> are identical in both flow-relative and line-relative terms, so there
    is only one set of these terms. </p>
   <p class="note" role="note"> Note: <a data-link-type="biblio" href="#biblio-css3-flexbox">[CSS3-FLEXBOX]</a> also defines <a href="https://www.w3.org/TR/css3-flexbox/#box-model">flex-relative terms</a>,
    which are used in describing flex layout. </p>
   <h3 class="heading settled" data-level="6.1" id="abstract-axes"><span class="secno">6.1. </span><span class="content"> Abstract Dimensions</span><a class="self-link" href="#abstract-axes"></a></h3>
   <p>The <dfn data-dfn-type="dfn" data-export id="abstract-dimensions">abstract dimensions<a class="self-link" href="#abstract-dimensions"></a></dfn> are defined below: </p>
   <dl>
    <dt><dfn data-dfn-type="dfn" data-export id="block-dimension">block dimension<a class="self-link" href="#block-dimension"></a></dfn>
    <dd>The dimension perpendicular to the flow of text within a line, i.e.
        the <a data-link-type="dfn" href="#vertical-dimension" id="ref-for-vertical-dimension">vertical dimension</a> in horizontal writing modes, and
        the <a data-link-type="dfn" href="#horizontal-dimension" id="ref-for-horizontal-dimension">horizontal dimension</a> in vertical writing modes.
    <dt><dfn data-dfn-type="dfn" data-export id="inline-dimension">inline dimension<a class="self-link" href="#inline-dimension"></a></dfn>
    <dd>The dimension parallel to the flow of text within a line, i.e.
        the <a data-link-type="dfn" href="#horizontal-dimension" id="ref-for-horizontal-dimension①">horizontal dimension</a> in horizontal writing modes, and
        the <a data-link-type="dfn" href="#vertical-dimension" id="ref-for-vertical-dimension①">vertical dimension</a> in vertical writing modes.
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block axis | block-axis" id="block-axis">block axis</dfn>
    <dd>The axis in the block dimension,
      i.e. the <a data-link-type="dfn" href="#y-axis" id="ref-for-y-axis">vertical axis</a> in horizontal writing modes
      and the <a data-link-type="dfn" href="#x-axis" id="ref-for-x-axis">horizontal axis</a> in vertical writing modes.
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline axis | inline-axis" id="inline-axis">inline axis</dfn>
    <dd>The axis in the inline dimension, i.e. the <a data-link-type="dfn" href="#x-axis" id="ref-for-x-axis①">horizontal
        axis</a> in horizontal writing modes and the <a data-link-type="dfn" href="#y-axis" id="ref-for-y-axis①">vertical axis</a> in vertical writing modes.
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block size | block-size" id="block-size">block size</dfn> 
    <dt id="extent"><a class="self-link" href="#extent"></a><dfn data-dfn-type="dfn" data-export id="logical-height">logical height<a class="self-link" href="#logical-height"></a></dfn> 
    <dd>A measurement in the block dimension:
        refers to the physical height (vertical dimension) in horizontal writing modes,
        and to the physical width (horizontal dimension) in vertical writing modes. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline size | inline-size" id="inline-size">inline size</dfn> 
    <dt id="measure"><a class="self-link" href="#measure"></a><dfn data-dfn-type="dfn" data-export id="logical-width">logical width<a class="self-link" href="#logical-width"></a></dfn> 
    <dd>A measurement in the inline dimension:
        refers to the physical width (horizontal dimension) in horizontal writing modes,
        and to the physical height (vertical dimension) in vertical writing modes. 
   </dl>
   <h3 class="heading settled" data-level="6.2" id="logical-directions"><span class="secno">6.2. </span><span class="content"> Flow-relative Directions</span><a class="self-link" href="#logical-directions"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="flow-relative direction" id="flow-relative-direction">flow-relative directions</dfn>, <a data-link-type="dfn" href="#block-start" id="ref-for-block-start①">block-start</a>, <a data-link-type="dfn" href="#block-end" id="ref-for-block-end①">block-end</a>, <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start①">inline-start</a>, and <a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end①">inline-end</a>,
    are defined relative to the flow of content on the page.
    In an <abbr title="left-to-right">LTR</abbr> <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb④">horizontal-tb</a> writing mode, they correspond to the
    top, bottom, left, and right directions, respectively.
    They are defined as follows: </p>
   <dl>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block start | block-start" id="block-start">block-start</dfn> 
    <dd>The side that comes earlier in the <a data-link-type="dfn" href="#block-flow-direction" id="ref-for-block-flow-direction⑦">block flow direction</a>,
    as determined by the <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑤">writing-mode</a> property:
    the physical top in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑤">horizontal-tb</a> mode,
    the right in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl④">vertical-rl</a>, and the left in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr②">vertical-lr</a>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block end | block-end" id="block-end">block-end</dfn> 
    <dd>The side opposite <a data-link-type="dfn" href="#block-start" id="ref-for-block-start②">block-start</a>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline start | inline-start" id="inline-start">inline-start</dfn> 
    <dd>The side from which text of the inline base direction would start.
    For boxes with a used <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②⑤">direction</a> value of <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr③">ltr</a>, this means the <a data-link-type="dfn" href="#line-left" id="ref-for-line-left③">line-left</a> side.
    For boxes with a used <span class="property" id="ref-for-propdef-direction②⑥">direction</span> value of <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl③">rtl</a>, this means the <a data-link-type="dfn" href="#line-right" id="ref-for-line-right③">line-right</a> side. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline end | inline-end" id="inline-end">inline-end</dfn> 
    <dd>The side opposite <a data-link-type="dfn" href="#start" id="ref-for-start③">start</a>. 
   </dl>
   <p>Where contextually unambiguous or encompassing both meanings,
    the terms <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="start">start</dfn> and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="end">end</dfn> are used in place of <a data-link-type="dfn" href="#block-start" id="ref-for-block-start③">block-start</a>/<a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start②">inline-start</a> and <a data-link-type="dfn" href="#block-end" id="ref-for-block-end②">block-end</a>/<a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end②">inline-end</a>, respectively. </p>
   <p class="note" role="note">Note that while determining the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start④">block-start</a> and <a data-link-type="dfn" href="#block-end" id="ref-for-block-end③">block-end</a> sides of a box depends only on the <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑥">writing-mode</a> property,
    determining the <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start③">inline-start</a> and <a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end③">inline-end</a> sides of a box depends
    not only on the <span class="property" id="ref-for-propdef-writing-mode①⑦">writing-mode</span> property but also the <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②⑦">direction</a> property.</p>
   <div class="example" id="example-bf84250f">
    <a class="self-link" href="#example-bf84250f"></a> 
    <figure>
      <img src="diagrams/sizing-ltr-tb.svg"> 
     <figcaption>Physical/logical terms as applicable to typical English text layout</figcaption>
    </figure>
   </div>
   <div class="example" id="example-40873f56">
    <a class="self-link" href="#example-40873f56"></a> 
    <figure>
      <img src="diagrams/sizing-ttb-rl.svg"> 
     <figcaption>Physical/logical terms as applicable to typical Chinese text layout</figcaption>
    </figure>
   </div>
   <h3 class="heading settled" data-level="6.3" id="line-directions"><span class="secno">6.3. </span><span class="content"> Line-relative Directions</span><a class="self-link" href="#line-directions"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-orientation">line orientation</dfn> determines which side of a line
    box is the logical “top” (ascender side).
    It is given by the <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑧">writing-mode</a> property.
    Usually the line-relative “top”
    corresponds to the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑤">block-start</a> side, but this is not always the case:
    in Mongolian typesetting (and thus by default in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr③">vertical-lr</a> writing
    modes), the line-relative “top” corresponds to the <a data-link-type="dfn" href="#block-end" id="ref-for-block-end④">block-end</a> side.
    Hence the need for distinct terminology. </p>
   <div class="figure">
     <img alt="Mongolian mixed with English" src="images/mongolian-lr.jpg"> 
    <p class="caption">A primarily Mongolian document, such as the one above, is written in
    vertical lines stacking left to right, but lays its Latin text with
    the tops of the glyphs towards the right. This makes the text run in
    the same inline direction as Mongolian (top-to-bottom) and face the
    same direction it does in other East Asian layouts (which have vertical
    lines stacking right to left), but the glyphs' tops are facing the
    bottom of the line stack rather than the top, which in an English
    paragraph would be upside-down. (See this <a href="diagrams/text-flow-vectors-lr-reverse.svg">Diagram of Mongolian
    Text Layout</a>.) </p>
   </div>
   <p>In addition to a line-relative “top” and “bottom” to map things like
    'vertical-align: top', CSS also needs to refer to a line-relative
    “left” and “right” in order to map things like <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align: left</a>.
    Thus there are four <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="line-relative direction" id="line-relative-direction">line-relative directions</dfn>, which are
    defined relative to the <a data-link-type="dfn" href="#line-orientation" id="ref-for-line-orientation">line orientation</a> as follows: </p>
   <dl>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="over">over</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-over">line-over</dfn> 
    <dd>Nominally the side that corresponds to the ascender side or “top”
      side of a line box. (The side overlines are typically drawn on.) 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="under">under</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-under">line-under</dfn> 
    <dd>Opposite of <a data-link-type="dfn" href="#over" id="ref-for-over②">over</a>: the line-relative “bottom” or descender side.
    (The side underlines are typically drawn on.) 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-left">line-left</dfn> 
    <dd>The line-relative "left" side of a line box,
    which is nominally the side from which <abbr title="left-to-right">LTR</abbr> text would start. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="line-right">line-right</dfn> 
    <dd>The line-relative "right" side of a line box,
    which is nominally the side from which <abbr title="right-to-left">RTL</abbr> text would start. (Opposite of <a data-link-type="dfn" href="#line-left" id="ref-for-line-left④">line-left</a>.) 
   </dl>
   <p>See the <a href="#logical-to-physical">table below</a> for the exact
    mappings between physical and line-relative directions. </p>
   <div class="figure">
     <a href="diagrams/line-orient-up.svg"> <img alt="Line orientation compass" class="landscape" src="diagrams/line-orient-up.png"></a> 
    <p class="caption">Line orientation in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑥">horizontal-tb</a></p>
   </div>
   <div class="figurepair">
    <div class="figure">
      <a href="diagrams/line-orient-right.svg"> <img alt="Typical orientation in vertical" class="portrait" src="diagrams/line-orient-right.png"></a> 
     <p class="caption">Line orientation in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑤">vertical-rl</a>, <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr④">vertical-lr</a>, and <a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-rl" id="ref-for-valdef-writing-mode-sideways-rl">sideways-rl</a></p>
    </div>
    <div class="figure">
      <a href="diagrams/line-orient-left.svg"> <img alt="Typical orientation in vertical" class="portrait" src="diagrams/line-orient-left.png"></a> 
     <p class="caption">Line orientation in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr①">sideways-lr</a></p>
    </div>
   </div>
   <div class="note" id="vertical-metrics" role="note">
    <a class="self-link" href="#vertical-metrics"></a> 
    <div class="sidefigure">
     <p><img alt="Baseline of an upright glyph is drawn vertically from the top center" src="images/vertical-upright-baseline.svg" width="80"> </p>
     <p class="caption">Vertical baseline of an upright glyph </p>
    </div>
     When <a class="css" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①①">text-orientation: upright</a>,
    the baseline is still vertical,
    and the vertical baseline in the font is used,
    or the vertical baseline is synthesized if the font does not provide. 
    <p> Since the baseline is vertical,
    the definitions for <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed⑥">mixed</a> or <a class="css" data-link-type="maybe" href="#valdef-text-orientation-sideways" id="ref-for-valdef-text-orientation-sideways④">sideways</a> above still apply; i.e., <a data-link-type="dfn" href="#line-over" id="ref-for-line-over①">line-over</a> is on right, and <a data-link-type="dfn" href="#line-under" id="ref-for-line-under①">line-under</a> is on left. </p>
    <p> This is in line with font systems such as OpenType which
    defines the ascender on right and
    the descender on left in their vertical metrics. </p>
   </div>
   <h3 class="heading settled" data-level="6.4" id="logical-to-physical"><span class="secno">6.4. </span><span class="content"> Abstract-to-Physical Mappings</span><a class="self-link" href="#logical-to-physical"></a></h3>
   <p>The following table summarizes the abstract-to-physical mappings
  (based on the <em>used</em> <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②⑧">direction</a> and <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode①⑨">writing-mode</a>): </p>
   <table class="complex data">
    <caption>Abstract-Physical Mapping</caption>
    <colgroup class="header">
    <colgroup span="8">
    <thead>
     <tr>
      <th scope="row"><a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②⓪">writing-mode</a>
      <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑦">horizontal-tb</a>
      <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑥">vertical-rl</a>, <a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-rl" id="ref-for-valdef-writing-mode-sideways-rl①">sideways-rl</a>
      <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr⑤">vertical-lr</a>
      <th colspan="2"><a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr②">sideways-lr</a>
     <tr>
      <th scope="row"><a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction②⑨">direction</a>
      <th><a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr④">ltr</a>
      <th><a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl④">rtl</a>
      <th><a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑤">ltr</a>
      <th><a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑤">rtl</a>
      <th><a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑥">ltr</a>
      <th><a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑥">rtl</a>
      <th><a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑦">ltr</a>
      <th><a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑦">rtl</a>
    <tbody>
     <tr>
      <th scope="row">block-size
      <td colspan="2">height
      <td colspan="6">width
     <tr>
      <th scope="row">inline-size
      <td colspan="2">width
      <td colspan="6">height
     <tr>
      <th scope="row">block-start
      <td colspan="2">top
      <td colspan="2">right
      <td colspan="4">left
     <tr>
      <th scope="row">block-end
      <td colspan="2">bottom
      <td colspan="2">left
      <td colspan="4">right
     <tr>
      <th scope="row">inline-start
      <td>left
      <td>right
      <td>top
      <td>bottom
      <td>top
      <td>bottom
      <td>bottom
      <td>top
     <tr>
      <th scope="row">inline-end
      <td>right
      <td>left
      <td>bottom
      <td>top
      <td>bottom
      <td>top
      <td>top
      <td>bottom
    <tbody>
     <tr>
      <th scope="row">over
      <td colspan="2">top
      <td colspan="4">right
      <td colspan="2">left
     <tr>
      <th scope="row">under
      <td colspan="2">bottom
      <td colspan="4">left
      <td colspan="2">right
     <tr>
      <th scope="row">line-left
      <td colspan="2">left
      <td colspan="4">top
      <td colspan="2">bottom
     <tr>
      <th scope="row">line-right
      <td colspan="2">right
      <td colspan="4">bottom
      <td colspan="2">top
   </table>
   <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value②">used</a> <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction③⓪">direction</a> depends on the computed <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②①">writing-mode</a> and <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①②">text-orientation</a>:
  in <a data-link-type="dfn" href="#vertical-writing-mode" id="ref-for-vertical-writing-mode">vertical writing modes</a>,
  a <span class="property" id="ref-for-propdef-text-orientation①③">text-orientation</span> value of <a class="css" data-link-type="maybe" href="#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright⑥">upright</a> forces the used <span class="property" id="ref-for-propdef-direction③①">direction</span> to <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑧">ltr</a>.</p>
   <h2 class="heading settled" data-level="7" id="abstract-layout"><span class="secno">7. </span><span class="content"> Abstract Box Layout</span><a class="self-link" href="#abstract-layout"></a></h2>
   <h3 class="heading settled" data-level="7.1" id="vertical-layout"><span class="secno">7.1. </span><span class="content"> Principles of Layout in Vertical Writing Modes</span><a class="self-link" href="#vertical-layout"></a></h3>
   <p>CSS box layout in vertical writing modes is analogous to layout in
    the horizontal writing modes, following the principles outlined below: </p>
   <p>Layout calculation rules (such as those in CSS2.1, Section 10.3)
     that apply to the horizontal dimension in horizontal writing modes
     instead apply to the vertical dimension in vertical writing modes.
     Likewise, layout calculation rules (such as those in CSS2.1, Section 10.6)
     that apply to the vertical dimension in horizontal writing modes
     instead apply to the horizontal dimension in vertical writing modes.
     Thus: </p>
   <ul>
    <li>
     <p>Layout rules that refer to the width use the height instead,
        and vice versa. </p>
    <li>
     <p>Layout rules that refer to the <a class="property" data-link-type="propdesc">*-left</a> and <span class="property">*-right</span> box properties (border, margin, padding, positioning offsets)
        use <span class="property">*-top</span> and <span class="property">*-bottom</span> instead, and vice versa,
        mapping the horizontal writing-mode rules of CSS2.1
        into vertical writing-mode rules using the <a data-link-type="dfn" href="#flow-relative-direction" id="ref-for-flow-relative-direction">flow-relative directions</a>.
        The side of the box these properties apply to doesn’t change:
        only which values are inputs to which layout calculations changes.
        The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> property still affects the lefthand margin, for example;
        however in a <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑦">vertical-rl</a> writing mode it takes part in margin collapsing
        in place of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a>. </p>
    <li>
     <p>Layout rules that depend on the <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction③②">direction</a> property to choose between
        left and right (e.g. overflow, overconstraint resolution, the initial
        value for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align①">text-align</a>, table column ordering)
        are abstracted to the <a data-link-type="dfn" href="#start" id="ref-for-start④">start</a> and <a data-link-type="dfn" href="#end" id="ref-for-end②">end</a> sides
        and applied appropriately.</p>
   </ul>
   <div class="example" id="example-63009bd2">
    <a class="self-link" href="#example-63009bd2"></a> 
    <p>For example, in vertical writing modes,
       table rows are vertical and table columns are horizontal.
      In a <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑧">vertical-rl</a> <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed⑦">mixed</a> <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑧">rtl</a> table,
      the first column would be on the bottom (the <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start④">inline-start</a> side),
      and the first row on the right (the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑥">block-start</a> side).
      The table’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left①">margin-left</a> would collapse
      with margins before (on the right) and after (on the left) the table, respectively,
      and if the table had <span class="css">auto</span> values for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom①">margin-bottom</a> it would be centered vertically within its block flow. </p>
    <div class="figure">
     <p><a href="diagrams/vertical-table.svg"> <img alt="Diagram of a vertical-rl mixed rtl table in a
        vertical block formatting context, showing the ordering of rows,
        cells, and columns as described above." src="diagrams/vertical-table.png"></a> </p>
     <p class="caption">Table in <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl⑨">vertical-rl</a> RTL writing mode</p>
    </div>
   </div>
   <p>For features such as text alignment, floating, and list marker positioning,
    that primarily reference the left or right sides of the line box or
    its longitudinal parallels and therefore have no top or bottom equivalent,
    the <a data-link-type="dfn" href="#line-left" id="ref-for-line-left⑤">line-left</a> and <a data-link-type="dfn" href="#line-right" id="ref-for-line-right④">line-right</a> sides
    are used as the reference for the left and right sides respectively. </p>
   <p>Likewise for features such as underlining, overlining, and baseline alignment
    (the unfortunately-named <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align⑥">vertical-align</a>), that primarily reference the
    top or bottom sides of the linebox or its transversal parallels and
    therefore have no left or right equivalent, the <a data-link-type="dfn" href="#line-over" id="ref-for-line-over②">line-over</a> and <a data-link-type="dfn" href="#line-under" id="ref-for-line-under②">line-under</a> sides are used as the reference for the
    top and bottom sides respectively. </p>
   <p>The details of these mappings are provided below. </p>
   <h3 class="heading settled" data-level="7.2" id="dimension-mapping"><span class="secno">7.2. </span><span class="content"> Dimensional Mapping</span><a class="self-link" href="#dimension-mapping"></a></h3>
   <p>Certain properties behave logically as follows: </p>
   <ul>
    <li>The first and second values of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-border-spacing" id="ref-for-propdef-border-spacing">border-spacing</a> property
      represent spacing between columns and rows respectively, not
      necessarily the horizontal and vertical spacing respectively. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <li>The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height">line-height</a> property always refers to the logical
      height. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
   </ul>
   <p>The height properties (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height">height</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height" id="ref-for-propdef-min-height">min-height</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height" id="ref-for-propdef-max-height">max-height</a>)
    refer to the physical height, and the width properties (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width">width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width" id="ref-for-propdef-min-width">min-width</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width" id="ref-for-propdef-max-width">max-width</a>) refer to the physical width. However,
    the rules used to calculate box dimensions and positions are logical. </p>
   <p>For example, the calculation rules in <a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">CSS2.1 Section 10.3</a> are used for the inline dimension measurements:
    they apply to the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size">inline size</a> (which could be either the physical width or physical height)
    and to the <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start⑤">inline-start</a> and <a data-link-type="dfn" href="#inline-end" id="ref-for-inline-end④">inline-end</a> margins, padding, and border.
    Likewise the calculation rules in <a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins">CSS2.1 Section 10.6</a> are used in the block dimension:
    they apply to the <a data-link-type="dfn" href="#block-size" id="ref-for-block-size">block size</a> and to the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑦">block-start</a> and <a data-link-type="dfn" href="#block-end" id="ref-for-block-end⑤">block-end</a> margins, padding, and border. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> </p>
   <p>As a corollary, percentages on the margin and padding properties,
    which are always calculated with respect to the containing block
    width in CSS2.1, are calculated with respect to the <em><a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size①">inline size</a></em> of the containing block in CSS3. </p>
   <h3 class="heading settled" data-level="7.3" id="orthogonal-flows"><span class="secno">7.3. </span><span class="content"> Orthogonal Flows</span><a class="self-link" href="#orthogonal-flows"></a></h3>
   <div class="note" role="note"> We appreciate feedback in general,
  	but we are particularly interested in feedback
    on this particularly complicated section. </div>
   <p>When a box has a different <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②②">writing-mode</a> from its
    containing block two cases are possible: </p>
   <ul>
    <li>The two writing modes are parallel to each other. (For example, <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl①⓪">vertical-rl</a> and <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr⑥">vertical-lr</a>).
    <li>The two writing modes are perpendicular to each other. (For
      example, <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑧">horizontal-tb</a> and <a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl①①">vertical-rl</a>).
   </ul>
   <p> When a box has a writing mode that is perpendicular to its containing block
    it is said to be in, or establish, an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="establish an orthogonal flow | orthogonal flow | orthogonal" id="establish-an-orthogonal-flow">orthogonal flow</dfn>. </p>
   <p> To handle this case, CSS layout calculations are divided into
    two phases: sizing a box, and positioning the box within its flow. </p>
   <ul>
    <li> In the sizing phase—calculating the width and height of the
      box—the dimensions of the box and the containing block
      are mapped to the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size②">inline size</a> and <a data-link-type="dfn" href="#block-size" id="ref-for-block-size①">block size</a> and calculations are performed
      accordingly using the writing mode of
      the box establishing the <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow">orthogonal flow</a>. 
    <li> In the positioning phase—calculating the positioning offsets,
      margins, borders, and padding—the dimensions of the box and
      its containing block are mapped to the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size③">inline size</a> and <a data-link-type="dfn" href="#block-size" id="ref-for-block-size②">block size</a> and calculations are performed according to the writing mode of the <em>containing block</em> of the box establishing the <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow①">orthogonal flow</a>. 
   </ul>
   <p>Since <span class="css">auto</span> margins are resolved consistent with the containing
    block’s writing mode, a box establishing an <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow②">orthogonal flow</a> can,
    once sized, be aligned or centered within its containing block just
    like other block-level boxes by using auto margins. </p>
   <div class="example" id="example-d9cb469c">
    <a class="self-link" href="#example-d9cb469c"></a> 
    <div class="sidefigure">
     <p><img alt="Diagram of a vertical flow box appearing in between two horizontal flow boxes." src="images/orthogonal.svg" width="180"> </p>
     <p class="caption">An example of orthogonal flow</p>
    </div>
    <p> For example, if a vertical block is placed inside a horizontal block,
      then when calculating the physical height (which is the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size④">inline size</a>)
      of the child block the physical height of the parent block is used
      as the child’s containing block <span id="ref-for-inline-size⑤">inline size</span>,
      even though the physical height is the <a data-link-type="dfn" href="#block-size" id="ref-for-block-size③">block size</a>, not the <span id="ref-for-inline-size⑥">inline size</span>,
      of the parent block. </p>
    <p> On the other hand,
      because the containing block is in a horizontal writing mode,
      the vertical margins on the child participate in margin-collapsing,
      even though they are in the <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis②">inline-axis</a> of the child,
      and horizontal auto margins will expand to fill the containing block,
      even though they are in the <a data-link-type="dfn" href="#block-axis" id="ref-for-block-axis">block-axis</a> of the child. </p>
   </div>
   <div class="note" id="orthogonal-shrink-to-fit" role="note">
    <a class="self-link" href="#orthogonal-shrink-to-fit"></a> Note that this section requires that
    when a child box auto-sized in its block axis
    establishes an orthogonal flow,
    the used block size of the child
    is calculated to fit its content;
    and this resulting content-based size
    is used as input to the <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis③">inline-axis</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content" id="ref-for-min-content">min-content size</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content">max-content size</a> of the parent. 
    <p> This means that when applying shrink-to-fit formula to a box
    such as an inline-block, float, or table-cell,
    if its child establishes an orthogonal flow,
    the calculation dependency must be changed so that
    the sizing phase of the child runs first and
    its used <a data-link-type="dfn" href="#block-size" id="ref-for-block-size④">block size</a> becomes an input to the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size⑦">inline-size</a> shrink-to-fit formula of the parent. </p>
   </div>
   <h4 class="heading settled" data-level="7.3.1" id="orthogonal-auto"><span class="secno">7.3.1. </span><span class="content"> Available Space in Orthogonal Flows</span><a class="self-link" href="#orthogonal-auto"></a></h4>
   <p>It is common in CSS for a containing block to have a definite <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size⑧">inline size</a>,
    but not a definite <a data-link-type="dfn" href="#block-size" id="ref-for-block-size⑤">block size</a>.
    This typically happens in CSS2.1
    when a containing block has an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a> height,
    for example: its width is given by the calculations in <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">10.3.3</a>,
    but its <span id="ref-for-block-size⑥">block size</span> depends on its contents.
    In such cases the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available">available inline space</a> is defined
    as the <span id="ref-for-inline-size⑨">inline size</span> of the containing block;
    but the <span id="ref-for-available①">available block space</span>,
    which would otherwise be the <span id="ref-for-block-size⑦">block size</span> of the containing block,
    is infinite. </p>
   <p>Putting a box in an <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow③">orthogonal flow</a> can result in the opposite:
    for the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available②">available block space</a> to be definite,
    but its <span id="ref-for-available③">available inline space</span> to be indefinite.
    In such cases a percentage of the containing block’s <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size①⓪">inline size</a> cannot be defined,
    and <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis④">inline axis</a> computations cannot be resolved.
    In these cases,
    an additional constraint is used as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#fallback" id="ref-for-fallback">fallback</a> in place of the <span id="ref-for-available④">available inline space</span> for calculations that require a definite <span id="ref-for-available⑤">available inline space</span>—<wbr>the smallest of </p>
   <ul>
    <li>the size represented by
          the containing block’s inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width">max size</a> (if that is fixed)
          floored by its inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width">min size</a> (if that is fixed) 
    <li>the nearest ancestor <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport">scrollport</a>’s inner size if that is fixed,
          else / capped by its inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width①">max size</a> if that is fixed,
          floored by its inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width①">min size</a> if that is fixed 
    <li>the initial containing block’s size 
   </ul>
   <p>See <a data-link-type="biblio" href="#biblio-css3-sizing">[CSS3-SIZING]</a> for further details on CSS sizing terminology and concepts. </p>
   <h4 class="heading settled" data-level="7.3.2" id="auto-multicol"><span class="secno">7.3.2. </span><span class="content"> Auto-sizing Block Containers in Orthogonal Flows</span><a class="self-link" href="#auto-multicol"></a></h4>
   <p> If a box establishing an <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow④">orthogonal flow</a> is
    either a block container or a multi-column container,
    for the case where the box’s <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size①①">inline size</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①">auto</a>: </p>
   <ol>
    <li>
     <strong>Calculate the used <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width" id="ref-for-propdef-column-width">column-width</a>:</strong> 
     <ul>
      <li>
       If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-count" id="ref-for-propdef-column-count">column-count</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width" id="ref-for-propdef-column-width①">column-width</a> are both <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-multicol-1/#valdef-column-width-auto" id="ref-for-valdef-column-width-auto">auto</a>,
      use the shrink-to-fit formula <code>min(<var>max-content</var>, max(<var>min-content</var>, <var>constraint</var>))</code>,
      where: 
       <dl>
        <dt><var>min-content</var> 
        <dd>the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-inline-size" id="ref-for-min-content-inline-size">min-content inline size</a> of the box 
        <dt><var>max-content</var> 
        <dd>the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-inline-size" id="ref-for-max-content-inline-size">max-content inline size</a> of the box 
        <dt><var>constraint</var> 
        <dd>
         the <a data-link-type="dfn" href="#inline-axis" id="ref-for-inline-axis⑤">inline-axis</a> size
        that would <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#stretch-fit" id="ref-for-stretch-fit">stretch fit</a> into to the smallest of 
         <ul>
          <li>the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available⑥">available space</a>:
              the containing block’s size if that is fixed,
              else the size represented by
              the containing block’s inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width②">max size</a> (if that is fixed)
              floored by its inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width②">min size</a> (if that is fixed) 
          <li>the nearest ancestor <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollport" id="ref-for-scrollport①">scrollport</a>’s inner size if that is fixed,
              else / capped by its inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-width" id="ref-for-max-width③">max size</a> if that is fixed,
              floored by its inner <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-width" id="ref-for-min-width③">min size</a> if that is fixed 
          <li>the initial containing block’s size 
         </ul>
       </dl>
       <div class="note" role="note">
        <div class="sidefigure"> <img alt="Diagram of automatically triggered multi-column preventing T-shaped documents" src="images/auto-multicol.svg" width="200"> </div>
         <strong>Note that this requirement automatically triggers multi-column flow on all block containers.</strong> This is so that overflowing content, instead of continuing off the side of the containing block,
        is wrapped into columns in the flow direction of the containing block,
        thus avoiding T-shaped documents.
        Authors can control the <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size①②">inline size</a> of these columns by setting <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width" id="ref-for-propdef-column-width②">column-width</a>,
        or disable this behavior by setting the <span id="ref-for-inline-size①③">inline size</span> property
        to a non-<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②">auto</a> value such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content" id="ref-for-valdef-width-max-content">max-content</a>. <br style="clear:both;"> 
       </div>
      <li>If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-count" id="ref-for-propdef-column-count①">column-count</a> is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-multicol-1/#valdef-column-count-auto" id="ref-for-valdef-column-count-auto">auto</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width" id="ref-for-propdef-column-width③">column-width</a> is <span class="css" id="ref-for-valdef-column-count-auto①">auto</span>,
      calculate the used <span class="property" id="ref-for-propdef-column-width④">column-width</span> with the same formula,
      except replace <var>constraint</var> with <var>constraint</var> − (<span class="property" id="ref-for-propdef-column-count②">column-count</span> − 1) × <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-gap" id="ref-for-propdef-column-gap">column-gap</a>. 
      <li>If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-count" id="ref-for-propdef-column-count③">column-count</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width" id="ref-for-propdef-column-width⑤">column-width</a> are both non-<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-multicol-1/#valdef-column-count-auto" id="ref-for-valdef-column-count-auto②">auto</a>,
      the used <span class="property" id="ref-for-propdef-column-width⑥">column-width</span> is the computed <span class="property" id="ref-for-propdef-column-width⑦">column-width</span>.
      (This is not recommended as it can cause overflow;
      instead it is better to set the <span class="property" id="ref-for-propdef-column-width⑧">column-width</span> and a max-block-size.) 
     </ul>
    <li>
     <strong>Calculate the used column length:</strong> If the computed <a data-link-type="dfn" href="#block-size" id="ref-for-block-size⑧">block size</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto③">auto</a> and the specified value of at least one of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-count" id="ref-for-propdef-column-count④">column-count</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width" id="ref-for-propdef-column-width⑨">column-width</a> was <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-multicol-1/#valdef-column-width-auto" id="ref-for-valdef-column-width-auto①">auto</a>,
      use the box’s <span id="ref-for-block-size⑨">block size</span> (if that is <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#definite" id="ref-for-definite">definite</a>),
      else the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#stretch-fit-block-size" id="ref-for-stretch-fit-block-size">stretch-fit block size</a> of the box (if that is <span id="ref-for-definite①">definite</span>),
      else the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-block-size" id="ref-for-max-content-block-size">max-content block size</a>.
      Otherwise follow the normal rules for sizing a multi-column container. 
     <p class="issue" id="issue-fae7187e"><a class="self-link" href="#issue-fae7187e"></a> Should we factor in the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-block-size" id="ref-for-min-content-block-size">min-content block size</a> in this formula,
        so that e.g. a large image will not overflow the box,
        but cause the box to overflow the containing block? </p>
    <li><strong>Calculate the used <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-count" id="ref-for-propdef-column-count⑤">column-count</a>:</strong> If the computed <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-count" id="ref-for-propdef-column-count⑥">column-count</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-multicol-1/#valdef-column-count-auto" id="ref-for-valdef-column-count-auto③">auto</a>, then
      the used <span class="property" id="ref-for-propdef-column-count⑦">column-count</span> follows from filling the resulting multi-column layout
      with the box’s content. 
   </ol>
   <p> The used <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size①④">inline size</a> of the resulting multi-column container is then calculated: </p>
   <ol>
    <li>If the content neither line-wraps nor fragments within the multi-column container,
        then the used <a data-link-type="dfn" href="#inline-size" id="ref-for-inline-size①⑤">inline size</a> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-inline-size" id="ref-for-max-content-inline-size①">max-content inline size</a> of the box’s contents.
        This criteria gives the shrink-to-fit behavior for short orthogonal flow contents
        without making a large blank space. 
    <li>Otherwise it is calculated from the used <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width" id="ref-for-propdef-column-width①⓪">column-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-count" id="ref-for-propdef-column-count⑧">column-count</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-gap" id="ref-for-propdef-column-gap①">column-gap</a>. 
   </ol>
   <p> The used <a data-link-type="dfn" href="#block-size" id="ref-for-block-size①⓪">block size</a> of the box is either the used column length
    (if multiple columns were used)
    or the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-block-size" id="ref-for-max-content-block-size①">max-content block size</a> of the content
    (if only one column was used).
    If the UA does not support CSS Multi-column Layout <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a>,
    the UA may instead calculate the box’s <span id="ref-for-block-size①①">block size</span> assuming infinite <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available⑦">available block space</a>,
    thus laying out its contents into a single column.
    (Note that this can, however, result in content that is clipped
    or otherwise inaccessible if it overflows its containing block.) </p>
   <p class="note" role="note">The automatic triggering of multi-column flow is at-risk and may be dropped during CR. </p>
   <h4 class="heading settled" data-level="7.3.3" id="orthogonal-layout"><span class="secno">7.3.3. </span><span class="content"> Auto-sizing Other Orthogonal Flow Roots</span><a class="self-link" href="#orthogonal-layout"></a></h4>
   <p>In order to limit the length of lines,
  block containers have special auto-sizing behavior (defined <a href="#auto-multicol">above</a>)
  when their <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available⑧">available inline space</a> is infinite
  (which typically occurs when they establish an <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow⑤">orthogonal flow</a>). </p>
   <p>Other layout models simply lay out into the infinite <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available⑨">available inline space</a> at their <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content①">max-content size</a>.
  However, they pass through the infinite <span id="ref-for-available①⓪">available inline space</span> to block containers they contain,
  possibly triggering that special auto-sizing behavior on those block containers
  even though they do not themselves establish an <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow⑥">orthogonal flow</a>. </p>
   <div class="example" id="example-e2cd91dc">
    <a class="self-link" href="#example-e2cd91dc"></a> 
    <p>For example,
      a table or <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex container</a> establishing an <a data-link-type="dfn" href="#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow⑦">orthogonal flow</a> is laid out into its given <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available①①">available space</a>.
      If its <span id="ref-for-available①②">available inline space</span> is infinite,
      this effectively lays the box out at its <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content" id="ref-for-max-content②">max-content size</a>.
      However, any of its table cells or <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item">flex items</a> that are <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#block-container" id="ref-for-block-container③">block containers</a> are laid out assuming infinite <span id="ref-for-available①③">available inline space</span> and so behave accordingly. </p>
   </div>
   <h4 class="heading settled" data-level="7.3.4" id="orthogonal-pagination"><span class="secno">7.3.4. </span><span class="content"> Fragmenting Orthogonal Flows</span><a class="self-link" href="#orthogonal-pagination"></a></h4>
   <p><em>This section is informative.</em></p>
   <p>With regards to fragmentation, the rules in CSS2.1 still hold in
    vertical writing modes and orthogonal flows: break opportunities
    do not occur inside line boxes, only between them.
    UAs that support <a data-link-type="biblio" href="#biblio-css3col">[CSS3COL]</a> may break in the (potentially zero-width)
    gap between columns, however. </p>
   <p>Note that if content spills outside the pagination stream
    established by the root element, the UA is not required to print
    such content. Authors wishing to mix writing modes with long streams
    of text are thus encouraged to use CSS columns to keep all content
    flowing in the document’s pagination direction. </p>
   <div class="note" role="note">
    <p>In other words, if your document would require two scrollbars on
    the screen it probably won’t all print. Fix your layout, e.g. by
    using <a href="https://www.w3.org/TR/css3-multicol/">columns</a> so
    that it all scrolls (and therefore paginates) in one direction if
    you want to make sure it’ll all print. T-shaped documents tend not
    to print well. </p>
   </div>
   <h3 class="heading settled" data-level="7.4" id="logical-direction-layout"><span class="secno">7.4. </span><span class="content"> Flow-Relative Mappings</span><a class="self-link" href="#logical-direction-layout"></a></h3>
   <p>Flow-relative directions are calculated with respect to
    the writing mode of the <em>containing block</em> of the
    box and used to abstract layout rules related to the
    box properties (margins, borders, padding) and any properties
    related to positioning the box within its containing block
    (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float">float</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-clear" id="ref-for-propdef-clear">clear</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-top" id="ref-for-propdef-top">top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-bottom" id="ref-for-propdef-bottom">bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-left" id="ref-for-propdef-left">left</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-right" id="ref-for-propdef-right">right</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-caption-side" id="ref-for-propdef-caption-side">caption-side</a>).
    For inline-level boxes, the writing mode of the <em>parent
    box</em> is used instead.
    (The left/right/top/bottom-named properties and values themselves are still mapped physically;
    with a special exception made for <span class="property" id="ref-for-propdef-caption-side①">caption-side</span>,
    whose <span class="css">top</span>/<span class="css">top-outside</span> and <span class="css">bottom</span>/<span class="css">bottom-outside</span> values
    are associated to the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑧">block-start</a> and <a data-link-type="dfn" href="#block-end" id="ref-for-block-end⑥">block-end</a> sides of the table, respectively.) </p>
   <p>For example, the margin that is dropped when a box’s inline
    dimension is <a href="https://www.w3.org/TR/CSS2/visudet.html#blockwidth">over-constrained</a> is the end margin as determined by the writing mode of the
    containing block. </p>
   <p>The <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">margin
    collapsing rules</a> apply exactly with the <em><a data-link-type="dfn" href="#block-start" id="ref-for-block-start⑨">block-start</a> margin</em> substituted for the top margin and the <em><a data-link-type="dfn" href="#block-end" id="ref-for-block-end⑦">block-end</a> margin</em> substituted for the bottom margin.
    Similarly the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start①⓪">block-start</a> padding and border are substituted
    for the top padding and border, and the <a data-link-type="dfn" href="#block-end" id="ref-for-block-end⑧">block-end</a> padding and
    border substituted for the bottom padding and border.
    Note this means only <span id="ref-for-block-start①①">block-start</span> and <span id="ref-for-block-end⑨">block-end</span> margins ever collapse. </p>
   <p>Flow-relative directions are calculated with respect to
    the writing mode of the box and used to abstract layout
    related to the box’s contents: </p>
   <ul>
    <li>The initial value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align②">text-align</a> property
      aligns to the <a data-link-type="dfn" href="#start" id="ref-for-start⑤">start</a> edge of the line box. 
    <li>The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-indent" id="ref-for-propdef-text-indent">text-indent</a> property indents from the <a data-link-type="dfn" href="#start" id="ref-for-start⑥">start</a> edge of the line box. 
    <li>For tables, the ordering of columns begins on the <a data-link-type="dfn" href="#inline-start" id="ref-for-inline-start⑥">inline-start</a> side of the table, and the ordering of rows begins on the <a data-link-type="dfn" href="#block-start" id="ref-for-block-start①②">block-start</a> side of the table. 
   </ul>
   <h3 class="heading settled" data-level="7.5" id="line-mappings"><span class="secno">7.5. </span><span class="content"> Line-Relative Mappings</span><a class="self-link" href="#line-mappings"></a></h3>
   <p>The <a data-link-type="dfn" href="#line-relative-direction" id="ref-for-line-relative-direction">line-relative directions</a> are <a data-link-type="dfn" href="#over" id="ref-for-over③">over</a>, <a data-link-type="dfn" href="#under" id="ref-for-under③">under</a>, <a data-link-type="dfn" href="#line-left" id="ref-for-line-left⑥">line-left</a>, and <a data-link-type="dfn" href="#line-right" id="ref-for-line-right⑤">line-right</a>.
    In an <abbr title="left-to-right">LTR</abbr> <a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb⑨">horizontal-tb</a> writing mode,
    they correspond to the
    top, bottom, left, and right directions, respectively. </p>
   <p>The <a data-link-type="dfn" href="#line-right" id="ref-for-line-right⑥">line-right</a> and <a data-link-type="dfn" href="#line-left" id="ref-for-line-left⑦">line-left</a> directions are calculated
    with respect to the writing mode of the box and used
    to interpret the <span class="css">left</span> and <span class="css">right</span> values of the
    following properties: </p>
   <ul>
    <li>the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align③">text-align</a> property <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
   </ul>
   <p>The <a data-link-type="dfn" href="#line-right" id="ref-for-line-right⑦">line-right</a> and <a data-link-type="dfn" href="#line-left" id="ref-for-line-left⑧">line-left</a> directions are calculated
    with respect to the writing mode of the <em>containing
    block</em> of the box and used to interpret the <span class="css">left</span> and <span class="css">right</span> values of the following properties: </p>
   <ul>
    <li>the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float①">float</a> property <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <li>the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-clear" id="ref-for-propdef-clear①">clear</a> property <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <li>the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-caption-side" id="ref-for-propdef-caption-side②">caption-side</a> property <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
   </ul>
   <p>The <a data-link-type="dfn" href="#over" id="ref-for-over④">over</a> and <a data-link-type="dfn" href="#under" id="ref-for-under④">under</a> directions are calculated with respect to
    the writing mode of the box and used to define the
    interpretation of the "top" (over) and "bottom" (under)
    sides of the line box as follows: </p>
   <ul>
    <li>For the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align⑦">vertical-align</a> property,
      the "top" of the line box is its <a data-link-type="dfn" href="#over" id="ref-for-over⑤">over</a> edge;
      the "bottom" of the line box is its under edge.
      Positive length and percentage values
      shift the baseline towards the <a data-link-type="dfn" href="#line-over" id="ref-for-line-over③">line-over</a> edge. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <li>For the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a> property,
      the underline is drawn on the <a data-link-type="dfn" href="#under" id="ref-for-under⑤">under</a> side of the text;
      the overline is drawn on the <a data-link-type="dfn" href="#over" id="ref-for-over⑥">over</a> side of the text. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> <span class="note">Note that the CSS Text Decoration Module defines
      this in more detail and provides additional controls for
      controlling the position of underlines and overlines. <a data-link-type="biblio" href="#biblio-css3-text-decor">[CSS3-TEXT-DECOR]</a></span> 
   </ul>
   <h3 class="heading settled" data-level="7.6" id="physical-only"><span class="secno">7.6. </span><span class="content"> Purely Physical Mappings</span><a class="self-link" href="#physical-only"></a></h3>
   <p>The following values are purely physical in their definitions
    and do not respond to changes in writing mode: </p>
   <ul>
    <li>the <a class="css" data-link-type="maybe" href="https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect" id="ref-for-funcdef-clip-rect">rect()</a> notation of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-clip" id="ref-for-propdef-clip">clip</a> property <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <li>the background properties <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> 
    <li>the border-image properties <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> 
    <li>the offsets of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow" id="ref-for-propdef-text-shadow">text-shadow</a> properties 
   </ul>
   <h2 class="heading settled" data-level="8" id="principal-flow"><span class="secno">8. </span><span class="content"> The Principal Writing Mode</span><a class="self-link" href="#principal-flow"></a></h2>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="principal-writing-mode">principal writing mode</dfn> of the document
  is determined by the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value③">used</a> <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②③">writing-mode</a>, <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction③③">direction</a>, and <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①④">text-orientation</a> values
  of the root element.
  This writing mode is used, for example,
  to determine the direction of scrolling
  and the default <a data-link-type="dfn" href="https://drafts.csswg.org/css-page-3/#page-progression" id="ref-for-page-progression">page progression</a> direction. </p>
   <p>As a special case for handling HTML documents,
  if the root element has a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element">body</a></code> child element <a data-link-type="biblio" href="#biblio-html">[HTML]</a>,
  the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value④">used value</a> of the of <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②④">writing-mode</a> and <a class="property" data-link-type="propdesc" href="#propdef-direction" id="ref-for-propdef-direction③④">direction</a> properties on root element
  are taken
  from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value②">computed</a> <span class="property" id="ref-for-propdef-writing-mode②⑤">writing-mode</span> and <span class="property" id="ref-for-propdef-direction③⑤">direction</span> of the first such child element instead of from the root element’s own values.
  The UA <em>may</em> also propagate the value of <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①⑤">text-orientation</a> in this manner.
  Note that this does not affect the computed values of <span class="property" id="ref-for-propdef-writing-mode②⑥">writing-mode</span>, <span class="property" id="ref-for-propdef-direction③⑥">direction</span>, or <span class="property" id="ref-for-propdef-text-orientation①⑥">text-orientation</span> of the root element itself. </p>
   <p class="note" role="note"><span>Note:</span> Propagation is done on used values rather than computed values
  to avoid disrupting other aspects of style computation,
  such as <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#inheritance" id="ref-for-inheritance">inheritance</a>, <a href="https://www.w3.org/TR/css-logical-1/#box">logical property mapping logic</a>,
  or <a href="https://www.w3.org/TR/css-values-4/#lengths">length value computation</a>.</p>
   <h3 class="heading settled" data-level="8.1" id="icb"><span class="secno">8.1. </span><span class="content"> Propagation to the Initial Containing Block</span><a class="self-link" href="#icb"></a></h3>
   <p>The <a data-link-type="dfn" href="#principal-writing-mode" id="ref-for-principal-writing-mode">principal writing mode</a> is propagated to
  the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a> and to the viewport,
  thereby affecting the layout of the root element
  and the scrolling direction of the viewport. </p>
   <p class="issue" id="issue-80e9901b"><a class="self-link" href="#issue-80e9901b"></a> Does it also propagate to @page boxes?</p>
   <h3 class="heading settled" data-level="8.2" id="page-direction"><span class="secno">8.2. </span><span class="content"> Page Flow: the page progression direction</span><a class="self-link" href="#page-direction"></a></h3>
   <p>In paged media CSS classifies all pages as either left or right pages.
  The <a data-link-type="dfn" href="https://drafts.csswg.org/css-page-3/#page-progression" id="ref-for-page-progression①">page progression</a> direction (see <a data-link-type="biblio" href="#biblio-css3page">[CSS3PAGE]</a>),
  which determines whether the left or right page in a spread is first in the flow
  and whether the first page is by default a left or right page,
  depends on the <a data-link-type="dfn" href="#principal-writing-mode" id="ref-for-principal-writing-mode①">principal writing mode</a> as follows: </p>
   <table class="data">
    <thead>
     <tr>
      <th><a data-link-type="dfn" href="#principal-writing-mode" id="ref-for-principal-writing-mode②">principal writing mode</a> 
      <th><a data-link-type="dfn" href="https://drafts.csswg.org/css-page-3/#page-progression" id="ref-for-page-progression②">page progression</a> 
    <tbody>
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb①⓪">horizontal-tb</a> and <a class="css" data-link-type="maybe" href="#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑨">ltr</a> 
      <td>left-to-right 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-writing-mode-horizontal-tb" id="ref-for-valdef-writing-mode-horizontal-tb①①">horizontal-tb</a> and <a class="css" data-link-type="maybe" href="#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑨">rtl</a> 
      <td>right-to-left 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl①②">vertical-rl</a> or <a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-rl" id="ref-for-valdef-writing-mode-sideways-rl②">sideways-rl</a> 
      <td>right-to-left 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr⑦">vertical-lr</a> or <a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr③">sideways-lr</a> 
      <td>left-to-right 
   </table>
   <p class="note" role="note"><span>Note:</span> Unless otherwise overridden,
  the first page of a document begins on the second half of a spread,
  e.g. on the right page in a left-to-right page progression.</p>
   <h2 class="heading settled" data-level="9" id="text-combine"><span class="secno">9. </span><span class="content"> Glyph Composition</span><a class="self-link" href="#text-combine"></a></h2>
   <p><span id="text-combine-horizontal"></span></p>
   <h3 class="heading settled" data-level="9.1" id="text-combine-upright"><span class="secno">9.1. </span><span class="content"> Horizontal-in-Vertical Composition: the <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright①">text-combine-upright</a> property</span><a class="self-link" href="#text-combine-upright"></a></h3>
   <table class="def propdef" data-link-for-hint="text-combine-upright">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-text-combine-upright">text-combine-upright</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> all <span id="ref-for-comb-one①⑦">|</span> [ digits &lt;integer><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ] 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>none 
     <tr>
      <th>Applies to:
      <td>non-replaced inline elements 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>yes 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword, plus integer if <span class="css">digits</span> 
     <tr>
      <th>Canonical order:
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>not animatable 
   </table>
   <p>This property specifies the combination of multiple <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit⑧">typographic character units</a> into the space of a single <span id="ref-for-typographic-character-unit⑨">typographic character unit</span>.
    If the combined text is wider than 1em, the UA must fit the contents within 1em, see below.
    The resulting composition is treated as a single upright glyph for the purposes of layout and decoration.
    This property only has an effect in vertical writing modes. Values have the following meanings: </p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-combine-upright" data-dfn-type="value" data-export id="valdef-text-combine-upright-none">none</dfn> 
    <dd>No special processing.
    <dt><dfn class="dfn-paneled css" data-dfn-for="text-combine-upright" data-dfn-type="value" data-export id="valdef-text-combine-upright-all">all</dfn> 
    <dd>Attempt to typeset horizontally
      all consecutive <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit①⓪">typographic character units</a> within the box
      such that they take up the space of a single <span id="ref-for-typographic-character-unit①①">typographic character unit</span> within the vertical line box. 
    <dt><dfn class="css" data-dfn-for="text-combine-upright" data-dfn-type="value" data-export id="valdef-text-combine-upright-digits-integer">digits <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value①">&lt;integer></a>?<a class="self-link" href="#valdef-text-combine-upright-digits-integer"></a></dfn> 
    <dd>Attempt to typeset horizontally
      each maximal sequence of consecutive ASCII digits (U+0030–U+0039)
      that has as many or fewer digits than the specified integer
      such that it takes up the space of a single <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit①②">typographic character unit</a> within the vertical line box.
      If the integer is omitted, it computes to 2.
      Integers outside the range 2-4 are invalid. 
   </dl>
   <div class="example" id="example-57d55bfa">
    <a class="self-link" href="#example-57d55bfa"></a> 
    <p>In East Asian documents, the <span class="css">text-combine-upright</span> effect is often
      used to display Latin-based strings such as components of a date or
      letters of an initialism, always in a horizontal writing mode
      regardless of the writing mode of the line:</p>
    <div class="figure">
     <p><img alt="Diagram of tate-chu-yoko, showing the two digits of a date
                   set halfwidth side-by-side in a vertical column of text" src="images/tate-chu-yoko.png"> </p>
     <p class="caption">Example of horizontal-in-vertical <i data-lt lang="ja">tate-chu-yoko</i></p>
    </div>
    <p>The figure is the result of the rules</p>
<pre>date { text-combine-upright: digits 2; }
</pre>
    <p>and the following markup:</p>
<pre>&lt;date>平成20年4月16日に&lt;/date>
</pre>
    <p>In Japanese, this effect is known as <i data-lt lang="ja">tate-chu-yoko</i>. </p>
   </div>
   <div class="example" id="example-feb64026">
    <a class="self-link" href="#example-feb64026"></a> 
    <p>The following example shows that applying <a class="css" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright②">text-combine-upright: digits 2</a> to an entire document, rather than to a segment with a known type of
      numeric content, can have unintended consequences: </p>
<pre>&lt;p>あれは10,000円ですよ！&lt;/p></pre>
    <div class="figure">
     <p><img alt="Rendering of the above markup with &apos;text-combine-upright: digits&apos;:
                   the first two digits of the number are rendered as tate-chu-yoko
                   while the rest of the number is rendered sideways." src="images/bad-tate-chu-yoko.png"> </p>
     <p class="caption">Example of mis-applied <i data-lt lang="ja">tate-chu-yoko</i></p>
    </div>
   </div>
   <h4 class="heading settled" data-level="9.1.1" id="text-combine-runs"><span class="secno">9.1.1. </span><span class="content"> Text Run Rules</span><a class="self-link" href="#text-combine-runs"></a></h4>
   <p>To avoid complexity in the rendering and layout, <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright③">text-combine-upright</a> can only combine plain text:
    consecutive <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit①③">typographic character units</a> that are not interrupted by a box boundary. </p>
   <p>However, because the property inherits,
    the UA must ensure that the contents of the box effecting the combination
    are not part of an otherwise-combinable sequence
    that happens to begin or end outside the box;
    if so, then the text is laid out normally,
    as if <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright④">text-combine-upright</a> were <a class="css" data-link-type="maybe" href="#valdef-text-combine-upright-none" id="ref-for-valdef-text-combine-upright-none">none</a>.
    To avoid combining only part of a sequence:
    if the boundary of a potentially-combinable run
    is due only to one or more inline box boundaries,
    the UA must inspect any characters that appear
    immediately before and immediately after the run,
    and if these characters would, without the intervening box,
    form a sequence that would (if it were not too long) combine,
    then the candidate run does not combine. </p>
   <p class="note" role="note">The above paragraph is at-risk. Comments from implementors are welcome.</p>
   <div class="example" id="example-73e9bf5b">
    <a class="self-link" href="#example-73e9bf5b"></a> 
    <p>For example, given the rule </p>
<pre>tcy { text-combine-upright: digits 4; }</pre>
    <p>if the following markup were given: </p>
<pre>&lt;tcy>12&lt;span>34&lt;/span>&lt;/tcy></pre>
    <p>no text would combine: the 12 and 34 both share an ancestor with the same <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright⑤">text-combine-upright</a> value,
    and therefore are considered part of a sequence of four combinable digits interrupted by a box boundary.
    However in these cases: </p>
<pre>12&lt;tcy>&lt;span>34&lt;/span>&lt;/tcy>12&lt;tcy>&lt;span>&lt;/span>34&lt;/tcy>
12&lt;tcy>34&lt;span>&lt;/span>&lt;/tcy></pre>
    <p>The 34 would combine, because the 12 immediately previous does not share with the 34 an ancestor with a common <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright⑥">text-combine-upright</a>,
    and therefore the 34 is considered to be the entirety of a sequence of two combinable digits. </p>
    <p>If we used the rule </p>
<pre>tcy { text-combine-upright: all; }</pre>
    <p>the same results would occur:
    the first case not combining because 1234 forms a sequence of four combinable characters interrupted by a box boundary,
    and the second combining 34 because it forms the entirety of a sequence of two combinable characters.</p>
   </div>
   <p class="note" role="note"> Note that the value of <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright⑦">text-combine-upright</a> (<a class="css" data-link-type="maybe" href="#valdef-text-combine-upright-all" id="ref-for-valdef-text-combine-upright-all">all</a> or <span class="css">digits</span>)
    only affects which types of <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit①④">typographic character unit</a> can be combined
    and what is the maximum length of a combinable sequence.
    It does not otherwise change behavior. </p>
   <h4 class="heading settled" data-level="9.1.2" id="text-combine-layout"><span class="secno">9.1.2. </span><span class="content"> Layout Rules</span><a class="self-link" href="#text-combine-layout"></a></h4>
   <p>When combining text as for <a class="css" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright⑧">text-combine-upright: all</a>,
    the glyphs of the combined text are <a data-link-type="dfn" href="#bidi-isolate" id="ref-for-bidi-isolate①">bidi-isolated</a> and composed horizontally
    (ignoring <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a> and any forced line breaks,
    but using the specified font settings),
    similar to the contents of an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block①">inline-block</a> box
    with a <a data-link-type="dfn" href="#horizontal-writing-mode" id="ref-for-horizontal-writing-mode①">horizontal writing mode</a> and a <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height①">line-height</a> of <span class="css">1em</span>.
    Any <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#white-space" id="ref-for-white-space">document white space</a> included at the start/end of the combined text <em>is</em> <a href="https://www.w3.org/TR/css-text-3/#white-space-processing">processed</a> <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a> as at the start/end of such an inline block.
    The effective size of the composition is assumed to be 1em square;
    anything outside the square is not measured for layout purposes.
    The UA should center the glyphs horizontally and vertically within the measured 1em square. </p>
   <p>The baseline of the resulting composition must be chosen such that the square is centered
    between the text-over and text-under baselines of its parent inline box prior to any baseline alignment shift (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align⑧">vertical-align</a>).
    For bidi reordering, the composition is treated the same as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit①⑤">typographic character unit</a> with <a class="css" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①⑦">text-orientation: upright</a>.
    For line breaking before and after the composition, it is treated as a regular inline with its actual contents.
    For other text layout purposes,
    e.g. emphasis marks, text-decoration, spacing,
    etc. the resulting composition is treated as a single glyph
    representing the Object Replacement Character U+FFFC. </p>
   <h4 class="heading settled" data-level="9.1.3" id="text-combine-compression"><span class="secno">9.1.3. </span><span class="content"> Compression Rules</span><a class="self-link" href="#text-combine-compression"></a></h4>
   <p>The UA must ensure that the combined advance width of the composition
    fits within 1em by compressing the combined text if necessary.
    (This does not necessarily mean that the glyphs will fit within 1em,
    as some glyphs are designed to draw outside their geometric boundaries.)
    OpenType implementations <em>must</em> use width-specific variants
    (OpenType features <code>hwid</code>/<code>twid</code>/<code>qwid</code>;
    other glyph-width features such as <code>fwid</code> or <code>pwid</code> are not included)
    to compress text
    in cases where those variants are available for all <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit①⑥">typographic character units</a> in the composition.
    Otherwise, the UA may use any means to compress the text,
    including substituting half-width, third-width, and/or quarter-width glyphs provided by the font,
    using other font features designed to compress text horizontally,
    scaling the text geometrically,
    or any combination thereof. </p>
   <div class="example" id="example-da304b32">
    <a class="self-link" href="#example-da304b32"></a> 
    <p>For example, a simple OpenType-based implementation might compress the text as follows: </p>
    <ol>
     <li>Enable 1/<var>n</var>-width glyphs for combined text of <var>n</var> <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit①⑦">typographic character units</a> (i.e. use OpenType <code>hwid</code> for 2 <span id="ref-for-typographic-character-unit①⑧">typographic character units</span>, <code>twid</code> for 3 <span id="ref-for-typographic-character-unit①⑨">typographic character units</span>, etc.)
        if the number of <span id="ref-for-typographic-character-unit②⓪">typographic character units</span> > 1.
        Note that the number of <span id="ref-for-typographic-character-unit②①">typographic character units</span> ≠ number of Unicode codepoints! 
     <li>If the result is wider than 1em, horizontally scale the result to 1em. 
    </ol>
    <p>A different implementation that utilizes OpenType layout features
    might compose the text first with normal glyphs to see if that fits,
    then substitute in half-width or third-width forms as available and necessary,
    possibly adjusting its approach or combining it with scaling operations
    depending on the available glyph substitutions. </p>
   </div>
   <p>In some fonts, the ideographic glyphs are given a compressed design
    such that they are 1em wide but shorter than 1em tall.
    To accommodate such fonts, the UA may vertically scale the composition
    to match the advance height of 水 U+6C34
    as rendered according to the specified font settings.
    In such a case the resulting composition assumes
    the advance height of 水 U+6C34 rather than 1em. </p>
   <h5 class="heading settled" data-level="9.1.3.1" id="text-combine-fullwidth"><span class="secno">9.1.3.1. </span><span class="content"> Full-width Characters</span><a class="self-link" href="#text-combine-fullwidth"></a></h5>
   <p>In order to preserve typographic color when compressing the text to 1em,
    when the combined text consists of more than one <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit②②">typographic character unit</a>,
    then any full-width <span id="ref-for-typographic-character-unit②③">typographic character units</span> should first be converted to their non-full-width equivalents
    by reversing the algorithm defined for <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-transform" id="ref-for-propdef-text-transform">text-transform: full-width</a> in <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a> before applying other compression techniques. </p>
   <div class="example" id="example-b52a6513">
    <a class="self-link" href="#example-b52a6513"></a> 
    <p>For example, an author might apply both <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-transform" id="ref-for-propdef-text-transform①">text-transform</a> and <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright⑨">text-combine-upright</a> to a date set in vertical text. </p>
<pre>date { text-combine-upright: digits 2; text-transform: full-width; }</pre>
    <p>Suppose this style rule is applied to a date such as. </p>
<pre>&lt;date>2010年2月23日&lt;/date></pre>
    <p>The "2010" is too long to be combined (4 digits), but the "2" and "23" will be affected.
    Since "23" is more than one <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#typographic-character-unit" id="ref-for-typographic-character-unit②④">typographic character unit</a>,
    it will not be affected by <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-transform" id="ref-for-propdef-text-transform②">text-transform: full-width</a>.
    However since the "2" is only one <span id="ref-for-typographic-character-unit②⑤">typographic character unit</span>,
    it will be transformed to a fullwidth "２".
    Since the "2010" was not combined, its digits, too, will be transformed to fullwidth "２０１０";
    and being fullwidth, they will be typeset upright, giving the following result: </p>
<pre style="text-align: center; font-family: MS Gothic, TakaoGothic, sans-serif">２
０
１
０
年
２
月
23
日</pre>
   </div>
   <p class="note" role="note"> Properties that affect glyph selection,
    such as the <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant" id="ref-for-propdef-font-variant">font-variant</a> and <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-feature-settings" id="ref-for-propdef-font-feature-settings">font-feature-settings</a> properties defined in <a data-link-type="biblio" href="#biblio-css3-fonts">[CSS3-FONTS]</a>,
    can potentially affect the selection of variants for characters included in combined text runs.
    Authors are advised to use these properties with care when <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright①⓪">text-combine-upright</a> is also used. </p>
   <h2 class="heading settled" data-level="10" id="priv-sec"><span class="secno">10. </span><span class="content">Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>This specification introduces no new privacy leaks,
	or security considerations beyond “implement it correctly”.</p>
   <h2 class="no-num heading settled" id="changes"><span class="content">Changes</span><a class="self-link" href="#changes"></a></h2>
   <h3 class="no-num heading settled" id="changes-201805"><span class="content"> Changes since the <a href="https://www.w3.org/TR/2018/CR-css-writing-modes-4-20180524">May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</a></span><a class="self-link" href="#changes-201805"></a></h3>
   <ul>
    <li> Clarified that propagation of the principal writing mode from the body element
      to the initial containing block and viewport
      does affect the used value on root element as well,
      but not its computed value.
      Also, optionally allow propagating <a class="property" data-link-type="propdesc" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①⑧">text-orientation</a> as well.
      This change was also applied to level 3.
      (<a href="https://github.com/w3c/csswg-drafts/issues/3066">Issue 3066</a>) 
    <li>
      Clarified that white space within—<wbr>particularly at the start/end of—<wbr>a <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright①①">text-combine-upright</a> combined text sequence
      is processed the same way as in an inline block.
      (<a href="https://github.com/w3c/csswg-drafts/issues/4139">Issue 4139</a>)
      This change was also applied to level 3. 
     <blockquote>
      <p>
       When combining text as for <a class="css" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright①②">text-combine-upright: all</a>,
        the glyphs of the combined text are <a data-link-type="dfn" href="#bidi-isolate" id="ref-for-bidi-isolate②">bidi-isolated</a> and composed horizontally
        (ignoring <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing①">letter-spacing</a> and any forced line breaks,
        but using the specified font settings),
        similar to the contents of an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline-block" id="ref-for-valdef-display-inline-block②">inline-block</a> box
        with a <a data-link-type="dfn" href="#horizontal-writing-mode" id="ref-for-horizontal-writing-mode②">horizontal writing mode</a> and a <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height②">line-height</a> of <span class="css">1em</span>. 
       <ins>Any <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#white-space" id="ref-for-white-space①">document white space</a> included at the start/end of the combined text <em>is</em> <a href="https://www.w3.org/TR/css-text-3/#white-space-processing">processed</a> <a data-link-type="biblio" href="#biblio-css-text-3">[CSS-TEXT-3]</a> as at the start/end of such an inline block.</ins>
      </p>
     </blockquote>
   </ul>
   <h3 class="heading settled" id="additions"><span class="content"> New in Level 4</span><a class="self-link" href="#additions"></a></h3>
   <p>This module is simply a copy of the <a href="http://www.w3.org/TR/2015/CR-css-writing-modes-3-20151215/">2015 Candidate Recommendation of CSS Writing Modes Level 3</a>.
	The difference from the <a href="https://www.w3.org/TR/css-writing-modes-3/">current CSS Writing Modes Level 3</a> is the set of features that were deferred from Level 3 due to later implementation uptake:</p>
   <ul>
    <li>Re-introduced <a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr④">sideways-lr</a> and <a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-rl" id="ref-for-valdef-writing-mode-sideways-rl③">sideways-rl</a> values of <a class="property" data-link-type="propdesc" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②⑦">writing-mode</a> 
    <li>Re-introduced the <span class="css">digits</span> value of <a class="property" data-link-type="propdesc" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright①③">text-combine-upright</a>. 
    <li>Re-introduced <a href="#auto-multicol">automatic multi-column behavior</a> of orthogonal flows. 
    <li>Clarified the <a href="#bidi-fragmentation">conditions for bidi reordering-induced fragmentation</a>.
		(<a href="https://github.com/w3c/csswg-drafts/issues/1509">Issue 1509</a>) 
   </ul>
   <h2 class="no-num heading settled" id="acknowledgements"><span class="content"> Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p> L. David Baron,
Brian Birtles,
James Clark,
John Daggett,
Nami Fujii,
Daisaku Hataoka, Martin Heijdra, Laurentiu Iancu,
Richard Ishida,
Jonathan Kew,
Yasuo Kida, Tatsuo Kobayashi, Toshi Kobayashi,
Ken Lunde,
Shunsuke Matsuki,
Nat McCully, Eric Muller,
Paul Nelson, Kenzou Onozawa,
Chris Pratley,
Xidorn Quan,
Florian Rivoal,
Dwayne Robinson,
Simon Sapin,
Marcin Sawicki,
Dirk Schulze,
Hajime Shiozawa,
Alan Stearns,
Michel Suignard,
Takao Suzuki,
Gérard Talbot,
Masataka Yakura,
Taro Yamamoto,
Steve Zilles</p>
   <h2 class="no-num heading settled" id="script-orientations"><span class="content">Appendix A:
Vertical Scripts in Unicode</span><a class="self-link" href="#script-orientations"></a></h2>
   <p><em>This section is informative.</em></p>
   <p>This appendix lists the <a data-link-type="dfn" href="#vertical-only" id="ref-for-vertical-only①">vertical-only</a> and <a data-link-type="dfn" href="#bi-orientational" id="ref-for-bi-orientational②">bi-orientational</a> scripts in Unicode 6.0 <a data-link-type="biblio" href="#biblio-unicode">[UNICODE]</a> and their transformation from horizontal to vertical orientation.
    Any script not listed explicitly is assumed to be <a data-link-type="dfn" href="#horizontal-only" id="ref-for-horizontal-only②">horizontal-only</a>.
    The script classification of Unicode characters is given by <a data-link-type="biblio" href="#biblio-uax24">[UAX24]</a>. </p>
   <table class="data">
    <caption>Vertical Scripts in Unicode</caption>
    <thead>
     <tr>
      <th>Code 
      <th>Name 
      <th>Transform (Clockwise) 
      <th>Vertical Intrinsic Direction 
    <tbody>
     <tr>
      <td>Bopo 
      <td>Bopomofo 
      <th>0° 
      <th>ttb 
     <tr>
      <td>Egyp 
      <td>Egyptian Hieroglyphs 
      <th>0° 
      <th>ttb 
     <tr>
      <td>Hira 
      <td>Hiragana 
      <th>0° 
      <th>ttb 
     <tr>
      <td>Kana 
      <td>Katakana 
      <th>0° 
      <th>ttb 
     <tr>
      <td>Hani 
      <td>Han 
      <th>0° 
      <th>ttb 
     <tr>
      <td>Hang 
      <td>Hangul 
      <th>0° 
      <th>ttb 
     <tr>
      <td>Merc 
      <td>Meroitic Cursive 
      <th>0° 
      <th>ttb 
     <tr>
      <td>Mero 
      <td>Meroitic Hieroglyphs 
      <th>0° 
      <th>ttb 
     <tr>
      <td>Mong 
      <td>Mongolian 
      <th>90° 
      <th>ttb 
     <tr>
      <td>Ogam 
      <td>Ogham 
      <th>-90° 
      <th>btt 
     <tr>
      <td>Orkh 
      <td>Old Turkic 
      <th>-90° 
      <th>ttb 
     <tr>
      <td>Phag 
      <td>Phags Pa 
      <th>90° 
      <th>ttb 
     <tr>
      <td>Yiii 
      <td>Yi 
      <th>0° 
      <th>ttb 
   </table>
   <p><strong>Exceptions:</strong> For the purposes of this specification, all fullwidth (F) and wide (W) characters
    are treated as belonging to a vertical script,
    and halfwidth characters (H) are treated as belonging to a <a data-link-type="dfn" href="#horizontal-script" id="ref-for-horizontal-script">horizontal script</a>. <a data-link-type="biblio" href="#biblio-uax11">[UAX11]</a> </p>
   <p class="note" role="note">Note that for <a data-link-type="dfn" href="#vertical-only" id="ref-for-vertical-only②">vertical-only</a> characters (such as Mongolian and Phags Pa letters),
    the glyphs in the Unicode code charts are shown in their vertical orientation.
    In horizontal text, they are typeset in a 90° counter-clockwise
    rotation from this orientation. </p>
   <p class="note" role="note"> Due to limitations in the current featureset of Unicode Technical Report 50 and CSS Writing Modes,
    vertical <a class="css" data-link-type="maybe" href="#valdef-text-orientation-mixed" id="ref-for-valdef-text-orientation-mixed⑧">mixed</a> typesetting cannot automatically handle either Ogham or Old Turkic.
    For these scripts, <a class="css" data-link-type="maybe" href="#valdef-writing-mode-sideways-lr" id="ref-for-valdef-writing-mode-sideways-lr⑤">sideways-lr</a> can be used to typeset passages. </p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#abstract-dimensions">abstract dimensions</a><span>, in §6.1</span>
   <li><a href="#valdef-text-combine-upright-all">all</a><span>, in §9.1</span>
   <li><a href="#alphabetic-baseline">alphabetic baseline</a><span>, in §4.2</span>
   <li><a href="#baseline">baseline</a><span>, in §4.1</span>
   <li><a href="#baseline-table">baseline table</a><span>, in §4.1</span>
   <li><a href="#bidi-isolate">bidi-isolate</a><span>, in §2.2</span>
   <li><a href="#bidi-isolate">bidi-isolated</a><span>, in §2.2</span>
   <li><a href="#bidi-isolate">bidi isolation</a><span>, in §2.2</span>
   <li><a href="#valdef-unicode-bidi-bidi-override">bidi-override</a><span>, in §2.2</span>
   <li><a href="#bidi-paragraph">bidi paragraph</a><span>, in §2.4</span>
   <li><a href="#bidirectionality">bidirectionality</a><span>, in §2</span>
   <li><a href="#bi-orientational">bi-orientational</a><span>, in §5</span>
   <li><a href="#bi-orientational-transform">bi-orientational transform</a><span>, in §5</span>
   <li><a href="#block-axis">block-axis</a><span>, in §6.1</span>
   <li><a href="#block-axis">block axis</a><span>, in §6.1</span>
   <li><a href="#block-dimension">block dimension</a><span>, in §6.1</span>
   <li><a href="#block-end">block-end</a><span>, in §6.2</span>
   <li><a href="#block-end">block end</a><span>, in §6.2</span>
   <li><a href="#block-flow-direction">block flow direction</a><span>, in §1</span>
   <li><a href="#block-size">block size</a><span>, in §6.1</span>
   <li><a href="#block-size">block-size</a><span>, in §6.1</span>
   <li><a href="#block-start">block start</a><span>, in §6.2</span>
   <li><a href="#block-start">block-start</a><span>, in §6.2</span>
   <li><a href="#physical-bottom">bottom</a><span>, in §6</span>
   <li><a href="#central-baseline">central baseline</a><span>, in §4.2</span>
   <li><a href="#valdef-text-combine-upright-digits-integer">digits &lt;integer>?</a><span>, in §9.1</span>
   <li><a href="#propdef-direction">direction</a><span>, in §2.1</span>
   <li><a href="#directional-embedding">directional embedding</a><span>, in §2.2</span>
   <li><a href="#directional-override">directional override</a><span>, in §2.2</span>
   <li><a href="#dominant-baseline">dominant baseline</a><span>, in §4.4</span>
   <li><a href="#valdef-unicode-bidi-embed">embed</a><span>, in §2.2</span>
   <li><a href="#end">end</a><span>, in §6.2</span>
   <li><a href="#establish-an-orthogonal-flow">establish an orthogonal flow</a><span>, in §7.3</span>
   <li><a href="#flow-relative">flow-relative</a><span>, in §6</span>
   <li><a href="#flow-relative-direction">flow-relative direction</a><span>, in §6.2</span>
   <li><a href="#forced-paragraph-break">forced paragraph break</a><span>, in §2.4</span>
   <li><a href="#propdef-glyph-orientation-vertical">glyph-orientation-vertical</a><span>, in §5.1.3</span>
   <li><a href="#height">height</a><span>, in §6</span>
   <li><a href="#x-axis">horizontal axis</a><span>, in §6</span>
   <li><a href="#horizontal-block-flow">horizontal block flow</a><span>, in §1</span>
   <li><a href="#horizontal-dimension">horizontal dimension</a><span>, in §6</span>
   <li><a href="#horizontal-only">horizontal-only</a><span>, in §5</span>
   <li><a href="#horizontal-script">horizontal script</a><span>, in §5</span>
   <li><a href="#valdef-writing-mode-horizontal-tb">horizontal-tb</a><span>, in §3.2</span>
   <li><a href="#horizontal-writing-mode">horizontal writing mode</a><span>, in §1</span>
   <li><a href="#inline-axis">inline axis</a><span>, in §6.1</span>
   <li><a href="#inline-axis">inline-axis</a><span>, in §6.1</span>
   <li><a href="#inline-base-direction">inline base direction</a><span>, in §1</span>
   <li><a href="#inline-dimension">inline dimension</a><span>, in §6.1</span>
   <li><a href="#inline-end">inline end</a><span>, in §6.2</span>
   <li><a href="#inline-end">inline-end</a><span>, in §6.2</span>
   <li><a href="#inline-size">inline size</a><span>, in §6.1</span>
   <li><a href="#inline-size">inline-size</a><span>, in §6.1</span>
   <li><a href="#inline-start">inline start</a><span>, in §6.2</span>
   <li><a href="#inline-start">inline-start</a><span>, in §6.2</span>
   <li><a href="#valdef-unicode-bidi-isolate">isolate</a><span>, in §2.2</span>
   <li><a href="#isolated-sequence">isolated sequence</a><span>, in §2.2</span>
   <li><a href="#valdef-unicode-bidi-isolate-override">isolate-override</a><span>, in §2.2</span>
   <li><a href="#bidi-isolate">isolation</a><span>, in §2.2</span>
   <li><a href="#physical-left">left</a><span>, in §6</span>
   <li><a href="#line-left">line-left</a><span>, in §6.3</span>
   <li><a href="#line-orientation">line orientation</a><span>, in §6.3</span>
   <li><a href="#line-over">line-over</a><span>, in §6.3</span>
   <li><a href="#line-relative">line-relative</a><span>, in §6</span>
   <li><a href="#line-relative-direction">line-relative direction</a><span>, in §6.3</span>
   <li><a href="#line-right">line-right</a><span>, in §6.3</span>
   <li><a href="#line-under">line-under</a><span>, in §6.3</span>
   <li><a href="#logical-height">logical height</a><span>, in §6.1</span>
   <li><a href="#logical-width">logical width</a><span>, in §6.1</span>
   <li><a href="#valdef-direction-ltr">ltr</a><span>, in §2.1</span>
   <li><a href="#valdef-text-orientation-mixed">mixed</a><span>, in §5.1</span>
   <li><a href="#valdef-text-combine-upright-none">none</a><span>, in §9.1</span>
   <li><a href="#valdef-unicode-bidi-normal">normal</a><span>, in §2.2</span>
   <li><a href="#establish-an-orthogonal-flow">orthogonal</a><span>, in §7.3</span>
   <li><a href="#establish-an-orthogonal-flow">orthogonal flow</a><span>, in §7.3</span>
   <li><a href="#over">over</a><span>, in §6.3</span>
   <li><a href="#physical">physical</a><span>, in §6</span>
   <li><a href="#physical-bottom">physical bottom</a><span>, in §6</span>
   <li><a href="#physical-dimensions">physical dimensions</a><span>, in §6</span>
   <li><a href="#physical-direction">physical direction</a><span>, in §6</span>
   <li><a href="#physical-left">physical left</a><span>, in §6</span>
   <li><a href="#physical-right">physical right</a><span>, in §6</span>
   <li><a href="#physical-top">physical top</a><span>, in §6</span>
   <li><a href="#valdef-unicode-bidi-plaintext">plaintext</a><span>, in §2.2</span>
   <li><a href="#principal-writing-mode">principal writing mode</a><span>, in §8</span>
   <li><a href="#physical-right">right</a><span>, in §6</span>
   <li><a href="#valdef-direction-rtl">rtl</a><span>, in §2.1</span>
   <li><a href="#valdef-text-orientation-sideways">sideways</a><span>, in §5.1</span>
   <li><a href="#valdef-writing-mode-sideways-lr">sideways-lr</a><span>, in §3.2</span>
   <li><a href="#valdef-text-orientation-sideways-right">sideways-right</a><span>, in §5.1</span>
   <li><a href="#valdef-writing-mode-sideways-rl">sideways-rl</a><span>, in §3.2</span>
   <li><a href="#start">start</a><span>, in §6.2</span>
   <li><a href="#propdef-text-combine-upright">text-combine-upright</a><span>, in §9.1</span>
   <li><a href="#propdef-text-orientation">text-orientation</a><span>, in §5.1</span>
   <li><a href="#physical-top">top</a><span>, in §6</span>
   <li><a href="#typographic-mode">typographic mode</a><span>, in §1</span>
   <li><a href="#under">under</a><span>, in §6.3</span>
   <li><a href="#propdef-unicode-bidi">unicode-bidi</a><span>, in §2.2</span>
   <li><a href="#valdef-text-orientation-upright">upright</a><span>, in §5.1</span>
   <li><a href="#y-axis">vertical axis</a><span>, in §6</span>
   <li><a href="#vertical-block-flow">vertical block flow</a><span>, in §1</span>
   <li><a href="#vertical-dimension">vertical dimension</a><span>, in §6</span>
   <li><a href="#valdef-writing-mode-vertical-lr">vertical-lr</a><span>, in §3.2</span>
   <li><a href="#vertical-only">vertical-only</a><span>, in §5</span>
   <li><a href="#valdef-writing-mode-vertical-rl">vertical-rl</a><span>, in §3.2</span>
   <li><a href="#vertical-script">vertical script</a><span>, in §5</span>
   <li><a href="#vertical-writing-mode">vertical writing mode</a><span>, in §1</span>
   <li><a href="#width">width</a><span>, in §6</span>
   <li><a href="#writing-mode">writing mode</a><span>, in §1</span>
   <li><a href="#propdef-writing-mode">writing-mode</a><span>, in §3.2</span>
   <li><a href="#x-axis">x-axis</a><span>, in §6</span>
   <li><a href="#y-axis">y-axis</a><span>, in §6</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-bottom">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom">https://drafts.csswg.org/css-box-3/#propdef-margin-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-bottom">7.1. 
Principles of Layout in Vertical Writing Modes</a> <a href="#ref-for-propdef-margin-bottom①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-left">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-left">https://drafts.csswg.org/css-box-3/#propdef-margin-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-left">7.1. 
Principles of Layout in Vertical Writing Modes</a> <a href="#ref-for-propdef-margin-left①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-right">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-right">https://drafts.csswg.org/css-box-3/#propdef-margin-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-right">7.1. 
Principles of Layout in Vertical Writing Modes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-top">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-top">https://drafts.csswg.org/css-box-3/#propdef-margin-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-top">7.1. 
Principles of Layout in Vertical Writing Modes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fragment">
   <a href="https://drafts.csswg.org/css-break-3/#fragment">https://drafts.csswg.org/css-break-3/#fragment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragment">2.4.5.1. 
Conditions of Reordering-induced Box Fragmentation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box-fragment">
   <a href="https://drafts.csswg.org/css-break-4/#box-fragment">https://drafts.csswg.org/css-break-4/#box-fragment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box-fragment">2.4.5.1. 
Conditions of Reordering-induced Box Fragmentation</a> <a href="#ref-for-box-fragment①">(2)</a> <a href="#ref-for-box-fragment②">(3)</a> <a href="#ref-for-box-fragment③">(4)</a> <a href="#ref-for-box-fragment④">(5)</a> <a href="#ref-for-box-fragment⑤">(6)</a> <a href="#ref-for-box-fragment⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-box-decoration-break">
   <a href="https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break">https://drafts.csswg.org/css-break-4/#propdef-box-decoration-break</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-decoration-break">2.4.5.2. 
Box Model of Reordering-induced Box Fragments</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">1.1. 
Module Interactions</a>
    <li><a href="#ref-for-computed-value①">5.1. 
Orienting Text: the text-orientation property</a>
    <li><a href="#ref-for-computed-value②">8. 
The Principal Writing Mode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-all-inherit">
   <a href="https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit">https://drafts.csswg.org/css-cascade-4/#valdef-all-inherit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-inherit">2.2. 
Embeddings and Overrides: the unicode-bidi property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inheritance">
   <a href="https://drafts.csswg.org/css-cascade-4/#inheritance">https://drafts.csswg.org/css-cascade-4/#inheritance</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inheritance">8. 
The Principal Writing Mode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-used-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#used-value">https://drafts.csswg.org/css-cascade-4/#used-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">5.1. 
Orienting Text: the text-orientation property</a> <a href="#ref-for-used-value①">(2)</a>
    <li><a href="#ref-for-used-value②">6.4. 
Abstract-to-Physical Mappings</a>
    <li><a href="#ref-for-used-value③">8. 
The Principal Writing Mode</a> <a href="#ref-for-used-value④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-container">
   <a href="https://drafts.csswg.org/css-display-3/#block-container">https://drafts.csswg.org/css-display-3/#block-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-container">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-block-container①">(2)</a>
    <li><a href="#ref-for-block-container②">3.2. 
Block Flow Direction: the writing-mode property</a>
    <li><a href="#ref-for-block-container③">7.3.3. 
Auto-sizing Other Orthogonal Flow Roots</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-formatting-context">
   <a href="https://drafts.csswg.org/css-display-3/#block-formatting-context">https://drafts.csswg.org/css-display-3/#block-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-formatting-context">3.2. 
Block Flow Direction: the writing-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-flow">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-flow">https://drafts.csswg.org/css-display-3/#valdef-display-flow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-flow">3.2. 
Block Flow Direction: the writing-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-flow-root">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-flow-root">https://drafts.csswg.org/css-display-3/#valdef-display-flow-root</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-flow-root">3.2. 
Block Flow Direction: the writing-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-flow">
   <a href="https://drafts.csswg.org/css-display-3/#in-flow">https://drafts.csswg.org/css-display-3/#in-flow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-flow">3.2. 
Block Flow Direction: the writing-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-independent-formatting-context">
   <a href="https://drafts.csswg.org/css-display-3/#independent-formatting-context">https://drafts.csswg.org/css-display-3/#independent-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-independent-formatting-context">3.2. 
Block Flow Direction: the writing-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-initial-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#initial-containing-block">https://drafts.csswg.org/css-display-3/#initial-containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initial-containing-block">8.1. 
Propagation to the Initial Containing Block</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-inline">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-inline">https://drafts.csswg.org/css-display-3/#valdef-display-inline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline">2.2. 
Embeddings and Overrides: the unicode-bidi property</a>
    <li><a href="#ref-for-valdef-display-inline①">3.2. 
Block Flow Direction: the writing-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-box">
   <a href="https://drafts.csswg.org/css-display-3/#inline-box">https://drafts.csswg.org/css-display-3/#inline-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-box">2.4.5. 
Reordering-induced Box Fragmentation</a>
    <li><a href="#ref-for-inline-box①">2.4.5.1. 
Conditions of Reordering-induced Box Fragmentation</a> <a href="#ref-for-inline-box②">(2)</a> <a href="#ref-for-inline-box③">(3)</a> <a href="#ref-for-inline-box④">(4)</a> <a href="#ref-for-inline-box⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-inline-block">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-inline-block">https://drafts.csswg.org/css-display-3/#valdef-display-inline-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline-block">3.2. 
Block Flow Direction: the writing-mode property</a>
    <li><a href="#ref-for-valdef-display-inline-block①">9.1.2. 
Layout Rules</a>
    <li><a href="#ref-for-valdef-display-inline-block②"> Changes since the May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inner-display-type">
   <a href="https://drafts.csswg.org/css-display-3/#inner-display-type">https://drafts.csswg.org/css-display-3/#inner-display-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inner-display-type">3.2. 
Block Flow Direction: the writing-mode property</a> <a href="#ref-for-inner-display-type①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-replaced-element">
   <a href="https://drafts.csswg.org/css-display-3/#replaced-element">https://drafts.csswg.org/css-display-3/#replaced-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-replaced-element">2.4.3. 
Bidi Treatment of Atomic Inlines</a>
    <li><a href="#ref-for-replaced-element①">3.2. 
Block Flow Direction: the writing-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-feature-settings">
   <a href="https://drafts.csswg.org/css-fonts-4/#propdef-font-feature-settings">https://drafts.csswg.org/css-fonts-4/#propdef-font-feature-settings</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-feature-settings">9.1.3.1. 
Full-width Characters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-root-inline-box">
   <a href="https://drafts.csswg.org/css-inline-3/#root-inline-box">https://drafts.csswg.org/css-inline-3/#root-inline-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-root-inline-box">2.2. 
Embeddings and Overrides: the unicode-bidi property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-vertical-align">
   <a href="https://drafts.csswg.org/css-inline-3/#propdef-vertical-align">https://drafts.csswg.org/css-inline-3/#propdef-vertical-align</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-vertical-align">4. 
Inline-level Alignment</a> <a href="#ref-for-propdef-vertical-align①">(2)</a>
    <li><a href="#ref-for-propdef-vertical-align②">4.3. 
Atomic Inline Baselines</a>
    <li><a href="#ref-for-propdef-vertical-align③">4.4. 
Baseline Alignment</a> <a href="#ref-for-propdef-vertical-align④">(2)</a> <a href="#ref-for-propdef-vertical-align⑤">(3)</a>
    <li><a href="#ref-for-propdef-vertical-align⑥">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-propdef-vertical-align⑦">7.5. 
Line-Relative Mappings</a>
    <li><a href="#ref-for-propdef-vertical-align⑧">9.1.2. 
Layout Rules</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-clip-rect">
   <a href="https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect">https://drafts.fxtf.org/css-masking-1/#funcdef-clip-rect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-clip-rect">7.6. 
Purely Physical Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scrollport">
   <a href="https://drafts.csswg.org/css-overflow-3/#scrollport">https://drafts.csswg.org/css-overflow-3/#scrollport</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scrollport">7.3.1. 
Available Space in Orthogonal Flows</a>
    <li><a href="#ref-for-scrollport①">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-character">
   <a href="https://drafts.csswg.org/css-text-3/#character">https://drafts.csswg.org/css-text-3/#character</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-character">5.1.1. 
Vertical Typesetting and Font Features</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-white-space">
   <a href="https://drafts.csswg.org/css-text-3/#white-space">https://drafts.csswg.org/css-text-3/#white-space</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-white-space">9.1.2. 
Layout Rules</a>
    <li><a href="#ref-for-white-space①"> Changes since the May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-letter-spacing">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing">https://drafts.csswg.org/css-text-3/#propdef-letter-spacing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-letter-spacing">9.1.2. 
Layout Rules</a>
    <li><a href="#ref-for-propdef-letter-spacing①"> Changes since the May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-align">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-text-align">https://drafts.csswg.org/css-text-3/#propdef-text-align</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-align">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-propdef-text-align①">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-propdef-text-align②">7.4. 
Flow-Relative Mappings</a>
    <li><a href="#ref-for-propdef-text-align③">7.5. 
Line-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-indent">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-text-indent">https://drafts.csswg.org/css-text-3/#propdef-text-indent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-indent">7.4. 
Flow-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-transform">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-text-transform">https://drafts.csswg.org/css-text-3/#propdef-text-transform</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-transform">9.1.3.1. 
Full-width Characters</a> <a href="#ref-for-propdef-text-transform①">(2)</a> <a href="#ref-for-propdef-text-transform②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-tracking">
   <a href="https://drafts.csswg.org/css-text-3/#tracking">https://drafts.csswg.org/css-text-3/#tracking</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-tracking">2.4.5.1. 
Conditions of Reordering-induced Box Fragmentation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typographic-character-unit">
   <a href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">https://drafts.csswg.org/css-text-3/#typographic-character-unit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typographic-character-unit">5.1. 
Orienting Text: the text-orientation property</a> <a href="#ref-for-typographic-character-unit①">(2)</a> <a href="#ref-for-typographic-character-unit②">(3)</a> <a href="#ref-for-typographic-character-unit③">(4)</a>
    <li><a href="#ref-for-typographic-character-unit④">5.1.1. 
Vertical Typesetting and Font Features</a> <a href="#ref-for-typographic-character-unit⑤">(2)</a> <a href="#ref-for-typographic-character-unit⑥">(3)</a>
    <li><a href="#ref-for-typographic-character-unit⑦">5.1.2. 
Mixed Vertical Orientations</a>
    <li><a href="#ref-for-typographic-character-unit⑧">9.1. 
Horizontal-in-Vertical Composition: the text-combine-upright property</a> <a href="#ref-for-typographic-character-unit⑨">(2)</a> <a href="#ref-for-typographic-character-unit①⓪">(3)</a> <a href="#ref-for-typographic-character-unit①①">(4)</a> <a href="#ref-for-typographic-character-unit①②">(5)</a>
    <li><a href="#ref-for-typographic-character-unit①③">9.1.1. 
Text Run Rules</a> <a href="#ref-for-typographic-character-unit①④">(2)</a>
    <li><a href="#ref-for-typographic-character-unit①⑤">9.1.2. 
Layout Rules</a>
    <li><a href="#ref-for-typographic-character-unit①⑥">9.1.3. 
Compression Rules</a> <a href="#ref-for-typographic-character-unit①⑦">(2)</a> <a href="#ref-for-typographic-character-unit①⑧">(3)</a> <a href="#ref-for-typographic-character-unit①⑨">(4)</a> <a href="#ref-for-typographic-character-unit②⓪">(5)</a> <a href="#ref-for-typographic-character-unit②①">(6)</a>
    <li><a href="#ref-for-typographic-character-unit②②">9.1.3.1. 
Full-width Characters</a> <a href="#ref-for-typographic-character-unit②③">(2)</a> <a href="#ref-for-typographic-character-unit②④">(3)</a> <a href="#ref-for-typographic-character-unit②⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-angle-value">
   <a href="https://drafts.csswg.org/css-values-3/#angle-value">https://drafts.csswg.org/css-values-3/#angle-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-angle-value">5.1.3. 
Obsolete: the SVG1.1 glyph-orientation-vertical property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-integer-value">
   <a href="https://drafts.csswg.org/css-values-3/#integer-value">https://drafts.csswg.org/css-values-3/#integer-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-integer-value">5.1.3. 
Obsolete: the SVG1.1 glyph-orientation-vertical property</a>
    <li><a href="#ref-for-integer-value①">9.1. 
Horizontal-in-Vertical Composition: the text-combine-upright property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-length-value">
   <a href="https://drafts.csswg.org/css-values-3/#length-value">https://drafts.csswg.org/css-values-3/#length-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-length-value">4.4. 
Baseline Alignment</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-percentage-value">
   <a href="https://drafts.csswg.org/css-values-3/#percentage-value">https://drafts.csswg.org/css-values-3/#percentage-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-percentage-value">4.4. 
Baseline Alignment</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">9.1. 
Horizontal-in-Vertical Composition: the text-combine-upright property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-wide-keywords">
   <a href="https://drafts.csswg.org/css-values-4/#css-wide-keywords">https://drafts.csswg.org/css-values-4/#css-wide-keywords</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-wide-keywords">1.2. 
Value Types and Terminology</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-font-relative-length">
   <a href="https://drafts.csswg.org/css-values-4/#font-relative-length">https://drafts.csswg.org/css-values-4/#font-relative-length</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-font-relative-length">1.1. 
Module Interactions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2.1. 
Specifying Directionality: the direction property</a>
    <li><a href="#ref-for-comb-one①">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-comb-one②">(2)</a> <a href="#ref-for-comb-one③">(3)</a> <a href="#ref-for-comb-one④">(4)</a> <a href="#ref-for-comb-one⑤">(5)</a>
    <li><a href="#ref-for-comb-one⑥">3.2. 
Block Flow Direction: the writing-mode property</a> <a href="#ref-for-comb-one⑦">(2)</a> <a href="#ref-for-comb-one⑧">(3)</a> <a href="#ref-for-comb-one⑨">(4)</a>
    <li><a href="#ref-for-comb-one①⓪">5.1. 
Orienting Text: the text-orientation property</a> <a href="#ref-for-comb-one①①">(2)</a>
    <li><a href="#ref-for-comb-one①②">5.1.3. 
Obsolete: the SVG1.1 glyph-orientation-vertical property</a> <a href="#ref-for-comb-one①③">(2)</a> <a href="#ref-for-comb-one①④">(3)</a> <a href="#ref-for-comb-one①⑤">(4)</a>
    <li><a href="#ref-for-comb-one①⑥">9.1. 
Horizontal-in-Vertical Composition: the text-combine-upright property</a> <a href="#ref-for-comb-one①⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-spacing">
   <a href="https://drafts.csswg.org/css2/tables.html#propdef-border-spacing">https://drafts.csswg.org/css2/tables.html#propdef-border-spacing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-spacing">7.2. 
Dimensional Mapping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-bottom">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-bottom">https://drafts.csswg.org/css2/visuren.html#propdef-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-bottom">7.4. 
Flow-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-caption-side">
   <a href="https://drafts.csswg.org/css2/tables.html#propdef-caption-side">https://drafts.csswg.org/css2/tables.html#propdef-caption-side</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-caption-side">7.4. 
Flow-Relative Mappings</a> <a href="#ref-for-propdef-caption-side①">(2)</a>
    <li><a href="#ref-for-propdef-caption-side②">7.5. 
Line-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-clear">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-clear">https://drafts.csswg.org/css2/visuren.html#propdef-clear</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-clear">7.4. 
Flow-Relative Mappings</a>
    <li><a href="#ref-for-propdef-clear①">7.5. 
Line-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-clip">
   <a href="https://drafts.csswg.org/css2/visufx.html#propdef-clip">https://drafts.csswg.org/css2/visufx.html#propdef-clip</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-clip">7.6. 
Purely Physical Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-display">https://drafts.csswg.org/css2/visuren.html#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-propdef-display①">(2)</a>
    <li><a href="#ref-for-propdef-display②">2.4.3. 
Bidi Treatment of Atomic Inlines</a>
    <li><a href="#ref-for-propdef-display③">3.2. 
Block Flow Direction: the writing-mode property</a> <a href="#ref-for-propdef-display④">(2)</a> <a href="#ref-for-propdef-display⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-float">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-float">https://drafts.csswg.org/css2/visuren.html#propdef-float</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-float">7.4. 
Flow-Relative Mappings</a>
    <li><a href="#ref-for-propdef-float①">7.5. 
Line-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">https://drafts.csswg.org/css2/visudet.html#propdef-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-height">7.2. 
Dimensional Mapping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-left">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-left">https://drafts.csswg.org/css2/visuren.html#propdef-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-left">7.4. 
Flow-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-line-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height">https://drafts.csswg.org/css2/visudet.html#propdef-line-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-line-height">7.2. 
Dimensional Mapping</a>
    <li><a href="#ref-for-propdef-line-height①">9.1.2. 
Layout Rules</a>
    <li><a href="#ref-for-propdef-line-height②"> Changes since the May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-max-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height">https://drafts.csswg.org/css2/visudet.html#propdef-max-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-height">7.2. 
Dimensional Mapping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-max-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width">https://drafts.csswg.org/css2/visudet.html#propdef-max-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-max-width">7.2. 
Dimensional Mapping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-min-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-min-height">https://drafts.csswg.org/css2/visudet.html#propdef-min-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-height">7.2. 
Dimensional Mapping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-min-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-min-width">https://drafts.csswg.org/css2/visudet.html#propdef-min-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-min-width">7.2. 
Dimensional Mapping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-right">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-right">https://drafts.csswg.org/css2/visuren.html#propdef-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-right">7.4. 
Flow-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-top">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-top">https://drafts.csswg.org/css2/visuren.html#propdef-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-top">7.4. 
Flow-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">https://drafts.csswg.org/css2/visudet.html#propdef-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-width">7.2. 
Dimensional Mapping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-container">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-container">https://drafts.csswg.org/css-flexbox-1/#flex-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-container">7.3.3. 
Auto-sizing Other Orthogonal Flow Roots</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-item">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-item">https://drafts.csswg.org/css-flexbox-1/#flex-item</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-item">7.3.3. 
Auto-sizing Other Orthogonal Flow Roots</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-variant">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant">https://drafts.csswg.org/css-fonts-3/#propdef-font-variant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-variant">9.1.3.1. 
Full-width Characters</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-default-object-size">
   <a href="https://drafts.csswg.org/css-images-3/#default-object-size">https://drafts.csswg.org/css-images-3/#default-object-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-default-object-size">3.2. 
Block Flow Direction: the writing-mode property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-width-auto">
   <a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">https://drafts.csswg.org/css-sizing-3/#valdef-width-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-width-auto">7.3.1. 
Available Space in Orthogonal Flows</a>
    <li><a href="#ref-for-valdef-width-auto①">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-valdef-width-auto②">(2)</a> <a href="#ref-for-valdef-width-auto③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-available">
   <a href="https://drafts.csswg.org/css-sizing-3/#available">https://drafts.csswg.org/css-sizing-3/#available</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-available">7.3.1. 
Available Space in Orthogonal Flows</a> <a href="#ref-for-available①">(2)</a> <a href="#ref-for-available②">(3)</a> <a href="#ref-for-available③">(4)</a> <a href="#ref-for-available④">(5)</a> <a href="#ref-for-available⑤">(6)</a>
    <li><a href="#ref-for-available⑥">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-available⑦">(2)</a>
    <li><a href="#ref-for-available⑧">7.3.3. 
Auto-sizing Other Orthogonal Flow Roots</a> <a href="#ref-for-available⑨">(2)</a> <a href="#ref-for-available①⓪">(3)</a> <a href="#ref-for-available①①">(4)</a> <a href="#ref-for-available①②">(5)</a> <a href="#ref-for-available①③">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-available">
   <a href="https://drafts.csswg.org/css-sizing-3/#available">https://drafts.csswg.org/css-sizing-3/#available</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-available">7.3.1. 
Available Space in Orthogonal Flows</a> <a href="#ref-for-available①">(2)</a> <a href="#ref-for-available②">(3)</a> <a href="#ref-for-available③">(4)</a> <a href="#ref-for-available④">(5)</a> <a href="#ref-for-available⑤">(6)</a>
    <li><a href="#ref-for-available⑥">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-available⑦">(2)</a>
    <li><a href="#ref-for-available⑧">7.3.3. 
Auto-sizing Other Orthogonal Flow Roots</a> <a href="#ref-for-available⑨">(2)</a> <a href="#ref-for-available①⓪">(3)</a> <a href="#ref-for-available①①">(4)</a> <a href="#ref-for-available①②">(5)</a> <a href="#ref-for-available①③">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-available">
   <a href="https://drafts.csswg.org/css-sizing-3/#available">https://drafts.csswg.org/css-sizing-3/#available</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-available">7.3.1. 
Available Space in Orthogonal Flows</a> <a href="#ref-for-available①">(2)</a> <a href="#ref-for-available②">(3)</a> <a href="#ref-for-available③">(4)</a> <a href="#ref-for-available④">(5)</a> <a href="#ref-for-available⑤">(6)</a>
    <li><a href="#ref-for-available⑥">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-available⑦">(2)</a>
    <li><a href="#ref-for-available⑧">7.3.3. 
Auto-sizing Other Orthogonal Flow Roots</a> <a href="#ref-for-available⑨">(2)</a> <a href="#ref-for-available①⓪">(3)</a> <a href="#ref-for-available①①">(4)</a> <a href="#ref-for-available①②">(5)</a> <a href="#ref-for-available①③">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-definite">
   <a href="https://drafts.csswg.org/css-sizing-3/#definite">https://drafts.csswg.org/css-sizing-3/#definite</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-definite">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-definite①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fallback">
   <a href="https://drafts.csswg.org/css-sizing-3/#fallback">https://drafts.csswg.org/css-sizing-3/#fallback</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fallback">7.3.1. 
Available Space in Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-max-width">
   <a href="https://drafts.csswg.org/css-sizing-3/#max-width">https://drafts.csswg.org/css-sizing-3/#max-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-max-width">7.3.1. 
Available Space in Orthogonal Flows</a> <a href="#ref-for-max-width①">(2)</a>
    <li><a href="#ref-for-max-width②">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-max-width③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-width-max-content">
   <a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content">https://drafts.csswg.org/css-sizing-3/#valdef-width-max-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-width-max-content">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-max-content-block-size">
   <a href="https://drafts.csswg.org/css-sizing-3/#max-content-block-size">https://drafts.csswg.org/css-sizing-3/#max-content-block-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-max-content-block-size">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-max-content-block-size①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-max-content-inline-size">
   <a href="https://drafts.csswg.org/css-sizing-3/#max-content-inline-size">https://drafts.csswg.org/css-sizing-3/#max-content-inline-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-max-content-inline-size">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-max-content-inline-size①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-max-content">
   <a href="https://drafts.csswg.org/css-sizing-3/#max-content">https://drafts.csswg.org/css-sizing-3/#max-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-max-content">7.3. 
Orthogonal Flows</a>
    <li><a href="#ref-for-max-content①">7.3.3. 
Auto-sizing Other Orthogonal Flow Roots</a> <a href="#ref-for-max-content②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-min-width">
   <a href="https://drafts.csswg.org/css-sizing-3/#min-width">https://drafts.csswg.org/css-sizing-3/#min-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-min-width">7.3.1. 
Available Space in Orthogonal Flows</a> <a href="#ref-for-min-width①">(2)</a>
    <li><a href="#ref-for-min-width②">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-min-width③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-min-content-block-size">
   <a href="https://drafts.csswg.org/css-sizing-3/#min-content-block-size">https://drafts.csswg.org/css-sizing-3/#min-content-block-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-min-content-block-size">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-min-content-inline-size">
   <a href="https://drafts.csswg.org/css-sizing-3/#min-content-inline-size">https://drafts.csswg.org/css-sizing-3/#min-content-inline-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-min-content-inline-size">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-min-content">
   <a href="https://drafts.csswg.org/css-sizing-3/#min-content">https://drafts.csswg.org/css-sizing-3/#min-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-min-content">7.3. 
Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stretch-fit">
   <a href="https://drafts.csswg.org/css-sizing-3/#stretch-fit">https://drafts.csswg.org/css-sizing-3/#stretch-fit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stretch-fit">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stretch-fit-block-size">
   <a href="https://drafts.csswg.org/css-sizing-3/#stretch-fit-block-size">https://drafts.csswg.org/css-sizing-3/#stretch-fit-block-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stretch-fit-block-size">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-decoration">
   <a href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration">https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-decoration">7.5. 
Line-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-shadow">
   <a href="https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow">https://drafts.csswg.org/css-text-decor-3/#propdef-text-shadow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-shadow">7.6. 
Purely Physical Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-box-shadow">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow">https://drafts.csswg.org/css-backgrounds-3/#propdef-box-shadow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-box-shadow">7.6. 
Purely Physical Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-column-width-auto">
   <a href="https://drafts.csswg.org/css-multicol-1/#valdef-column-width-auto">https://drafts.csswg.org/css-multicol-1/#valdef-column-width-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-column-width-auto">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-valdef-column-width-auto①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-column-count">
   <a href="https://drafts.csswg.org/css-multicol-1/#propdef-column-count">https://drafts.csswg.org/css-multicol-1/#propdef-column-count</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-column-count">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-propdef-column-count①">(2)</a> <a href="#ref-for-propdef-column-count②">(3)</a> <a href="#ref-for-propdef-column-count③">(4)</a> <a href="#ref-for-propdef-column-count④">(5)</a> <a href="#ref-for-propdef-column-count⑤">(6)</a> <a href="#ref-for-propdef-column-count⑥">(7)</a> <a href="#ref-for-propdef-column-count⑦">(8)</a> <a href="#ref-for-propdef-column-count⑧">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-column-gap">
   <a href="https://drafts.csswg.org/css-multicol-1/#propdef-column-gap">https://drafts.csswg.org/css-multicol-1/#propdef-column-gap</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-column-gap">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-propdef-column-gap①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-column-width">
   <a href="https://drafts.csswg.org/css-multicol-1/#propdef-column-width">https://drafts.csswg.org/css-multicol-1/#propdef-column-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-column-width">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-propdef-column-width①">(2)</a> <a href="#ref-for-propdef-column-width②">(3)</a> <a href="#ref-for-propdef-column-width③">(4)</a> <a href="#ref-for-propdef-column-width④">(5)</a> <a href="#ref-for-propdef-column-width⑤">(6)</a> <a href="#ref-for-propdef-column-width⑥">(7)</a> <a href="#ref-for-propdef-column-width⑦">(8)</a> <a href="#ref-for-propdef-column-width⑧">(9)</a> <a href="#ref-for-propdef-column-width⑨">(10)</a> <a href="#ref-for-propdef-column-width①⓪">(11)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-page-progression">
   <a href="https://drafts.csswg.org/css-page-3/#page-progression">https://drafts.csswg.org/css-page-3/#page-progression</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-page-progression">8. 
The Principal Writing Mode</a>
    <li><a href="#ref-for-page-progression①">8.2. 
Page Flow: the page progression direction</a> <a href="#ref-for-page-progression②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-body-element">
   <a href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element">https://html.spec.whatwg.org/multipage/sections.html#the-body-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-body-element">8. 
The Principal Writing Mode</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-box-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-bottom" style="color:initial">margin-bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-left" style="color:initial">margin-left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-right" style="color:initial">margin-right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-top" style="color:initial">margin-top</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-BREAK-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-fragment" style="color:initial">fragment</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-box-fragment" style="color:initial">box fragment</span>
     <li><span class="dfn-paneled" id="term-for-propdef-box-decoration-break" style="color:initial">box-decoration-break</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-CASCADE-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
     <li><span class="dfn-paneled" id="term-for-valdef-all-inherit" style="color:initial">inherit</span>
     <li><span class="dfn-paneled" id="term-for-inheritance" style="color:initial">inheritance</span>
     <li><span class="dfn-paneled" id="term-for-used-value" style="color:initial">used value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-container" style="color:initial">block container</span>
     <li><span class="dfn-paneled" id="term-for-block-formatting-context" style="color:initial">block formatting context</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-flow" style="color:initial">flow</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-flow-root" style="color:initial">flow-root</span>
     <li><span class="dfn-paneled" id="term-for-in-flow" style="color:initial">in-flow</span>
     <li><span class="dfn-paneled" id="term-for-independent-formatting-context" style="color:initial">independent formatting context</span>
     <li><span class="dfn-paneled" id="term-for-initial-containing-block" style="color:initial">initial containing block</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-inline" style="color:initial">inline</span>
     <li><span class="dfn-paneled" id="term-for-inline-box" style="color:initial">inline box</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-inline-block" style="color:initial">inline-block</span>
     <li><span class="dfn-paneled" id="term-for-inner-display-type" style="color:initial">inner display type</span>
     <li><span class="dfn-paneled" id="term-for-replaced-element" style="color:initial">replaced element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font-feature-settings" style="color:initial">font-feature-settings</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-inline-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-root-inline-box" style="color:initial">root inline box</span>
     <li><span class="dfn-paneled" id="term-for-propdef-vertical-align" style="color:initial">vertical-align</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-masking-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-funcdef-clip-rect" style="color:initial">rect()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-scrollport" style="color:initial">scrollport</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-character" style="color:initial">character</span>
     <li><span class="dfn-paneled" id="term-for-white-space" style="color:initial">document white space</span>
     <li><span class="dfn-paneled" id="term-for-propdef-letter-spacing" style="color:initial">letter-spacing</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-align" style="color:initial">text-align</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-indent" style="color:initial">text-indent</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-transform" style="color:initial">text-transform</span>
     <li><span class="dfn-paneled" id="term-for-tracking" style="color:initial">tracking</span>
     <li><span class="dfn-paneled" id="term-for-typographic-character-unit" style="color:initial">typographic character unit</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-VALUES-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-angle-value" style="color:initial">&lt;angle></span>
     <li><span class="dfn-paneled" id="term-for-integer-value" style="color:initial">&lt;integer></span>
     <li><span class="dfn-paneled" id="term-for-length-value" style="color:initial">&lt;length></span>
     <li><span class="dfn-paneled" id="term-for-percentage-value" style="color:initial">&lt;percentage></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-css-wide-keywords" style="color:initial">css-wide keywords</span>
     <li><span class="dfn-paneled" id="term-for-font-relative-length" style="color:initial">font-relative lengths</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-border-spacing" style="color:initial">border-spacing</span>
     <li><span class="dfn-paneled" id="term-for-propdef-bottom" style="color:initial">bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-caption-side" style="color:initial">caption-side</span>
     <li><span class="dfn-paneled" id="term-for-propdef-clear" style="color:initial">clear</span>
     <li><span class="dfn-paneled" id="term-for-propdef-clip" style="color:initial">clip</span>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-propdef-float" style="color:initial">float</span>
     <li><span class="dfn-paneled" id="term-for-propdef-height" style="color:initial">height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-left" style="color:initial">left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-line-height" style="color:initial">line-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-max-height" style="color:initial">max-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-max-width" style="color:initial">max-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-min-height" style="color:initial">min-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-min-width" style="color:initial">min-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-right" style="color:initial">right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-top" style="color:initial">top</span>
     <li><span class="dfn-paneled" id="term-for-propdef-width" style="color:initial">width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-FLEXBOX]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-flex-container" style="color:initial">flex container</span>
     <li><span class="dfn-paneled" id="term-for-flex-item" style="color:initial">flex item</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-FONTS]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font-variant" style="color:initial">font-variant</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css3-images]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-default-object-size" style="color:initial">default object size</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-SIZING]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-width-auto" style="color:initial">auto</span>
     <li><span class="dfn-paneled" id="term-for-available" style="color:initial">available block space</span>
     <li><span class="dfn-paneled" id="term-for-available①" style="color:initial">available inline space</span>
     <li><span class="dfn-paneled" id="term-for-available②" style="color:initial">available space</span>
     <li><span class="dfn-paneled" id="term-for-definite" style="color:initial">definite</span>
     <li><span class="dfn-paneled" id="term-for-fallback" style="color:initial">fallback</span>
     <li><span class="dfn-paneled" id="term-for-max-width" style="color:initial">max size</span>
     <li><span class="dfn-paneled" id="term-for-valdef-width-max-content" style="color:initial">max-content</span>
     <li><span class="dfn-paneled" id="term-for-max-content-block-size" style="color:initial">max-content block size</span>
     <li><span class="dfn-paneled" id="term-for-max-content-inline-size" style="color:initial">max-content inline size</span>
     <li><span class="dfn-paneled" id="term-for-max-content" style="color:initial">max-content size</span>
     <li><span class="dfn-paneled" id="term-for-min-width" style="color:initial">min size</span>
     <li><span class="dfn-paneled" id="term-for-min-content-block-size" style="color:initial">min-content block size</span>
     <li><span class="dfn-paneled" id="term-for-min-content-inline-size" style="color:initial">min-content inline size</span>
     <li><span class="dfn-paneled" id="term-for-min-content" style="color:initial">min-content size</span>
     <li><span class="dfn-paneled" id="term-for-stretch-fit" style="color:initial">stretch fit</span>
     <li><span class="dfn-paneled" id="term-for-stretch-fit-block-size" style="color:initial">stretch-fit block size</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-TEXT-DECOR]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-text-decoration" style="color:initial">text-decoration</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-shadow" style="color:initial">text-shadow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3BG]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-box-shadow" style="color:initial">box-shadow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3COL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-column-width-auto" style="color:initial">auto <small>(for column-width)</small></span>
     <li><span class="dfn-paneled" id="term-for-propdef-column-count" style="color:initial">column-count</span>
     <li><span class="dfn-paneled" id="term-for-propdef-column-gap" style="color:initial">column-gap</span>
     <li><span class="dfn-paneled" id="term-for-propdef-column-width" style="color:initial">column-width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3PAGE]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-page-progression" style="color:initial">page progression</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-body-element" style="color:initial">body</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-box-3">[CSS-BOX-3]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
   <dt id="biblio-css-break-3">[CSS-BREAK-3]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a>
   <dt id="biblio-css-break-4">[CSS-BREAK-4]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/">CSS Fragmentation Module Level 4</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-inline-3">[CSS-INLINE-3]
   <dd>Dave Cramer; Elika Etemad; Steve Zilles. <a href="https://www.w3.org/TR/css-inline-3/">CSS Inline Layout Module Level 3</a>. 8 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a>
   <dt id="biblio-css-masking-1">[CSS-MASKING-1]
   <dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-masking-1/">CSS Masking Module Level 1</a>. 26 August 2014. CR. URL: <a href="https://www.w3.org/TR/css-masking-1/">https://www.w3.org/TR/css-masking-1/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 12 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3-images">[CSS3-IMAGES]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css3-images/">CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. CR. URL: <a href="https://www.w3.org/TR/css3-images/">https://www.w3.org/TR/css3-images/</a>
   <dt id="biblio-css3-sizing">[CSS3-SIZING]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. 22 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a>
   <dt id="biblio-css3-text-decor">[CSS3-TEXT-DECOR]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>. 3 July 2018. CR. URL: <a href="https://www.w3.org/TR/css-text-decor-3/">https://www.w3.org/TR/css-text-decor-3/</a>
   <dt id="biblio-css3bg">[CSS3BG]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css3col">[CSS3COL]
   <dd>Florian Rivoal; Rachel Andrew. <a href="https://www.w3.org/TR/css-multicol-1/">CSS Multi-column Layout Module Level 1</a>. 28 May 2018. WD. URL: <a href="https://www.w3.org/TR/css-multicol-1/">https://www.w3.org/TR/css-multicol-1/</a>
   <dt id="biblio-css3page">[CSS3PAGE]
   <dd>Elika Etemad; Simon Sapin. <a href="https://www.w3.org/TR/css-page-3/">CSS Paged Media Module Level 3</a>. 18 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-page-3/">https://www.w3.org/TR/css-page-3/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-rfc6919">[RFC6919]
   <dd>R. Barnes; S. Kent; E. Rescorla. <a href="https://tools.ietf.org/html/rfc6919">Further Key Words for Use in RFCs to Indicate Requirement Levels</a>. 1 April 2013. Experimental. URL: <a href="https://tools.ietf.org/html/rfc6919">https://tools.ietf.org/html/rfc6919</a>
   <dt id="biblio-svg11">[SVG11]
   <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a>
   <dt id="biblio-uax11">[UAX11]
   <dd>Ken Lunde 小林劍󠄁. <a href="https://www.unicode.org/reports/tr11/tr11-36.html">East Asian Width</a>. 25 January 2019. Unicode Standard Annex #11. URL: <a href="https://www.unicode.org/reports/tr11/tr11-36.html">https://www.unicode.org/reports/tr11/tr11-36.html</a>
   <dt id="biblio-uax24">[UAX24]
   <dd>Ken Whistler. <a href="https://www.unicode.org/reports/tr24/tr24-29.html">Unicode Script Property</a>. 6 February 2019. Unicode Standard Annex #24. URL: <a href="https://www.unicode.org/reports/tr24/tr24-29.html">https://www.unicode.org/reports/tr24/tr24-29.html</a>
   <dt id="biblio-uax50">[UAX50]
   <dd>Koji Ishii 石井宏治; Ken Lunde 小林劍󠄁. <a href="https://www.unicode.org/reports/tr50/tr50-22.html">Unicode Vertical Text Layout</a>. 4 February 2019. Unicode Standard Annex #50. URL: <a href="https://www.unicode.org/reports/tr50/tr50-22.html">https://www.unicode.org/reports/tr50/tr50-22.html</a>
   <dt id="biblio-uax9">[UAX9]
   <dd>Mark Davis; Aharon Lanin; Andrew Glass. <a href="https://www.unicode.org/reports/tr9/tr9-41.html">Unicode Bidirectional Algorithm</a>. 4 February 2019. Unicode Standard Annex #9. URL: <a href="https://www.unicode.org/reports/tr9/tr9-41.html">https://www.unicode.org/reports/tr9/tr9-41.html</a>
   <dt id="biblio-unicode">[UNICODE]
   <dd><a href="https://www.unicode.org/versions/latest/">The Unicode Standard</a>. URL: <a href="https://www.unicode.org/versions/latest/">https://www.unicode.org/versions/latest/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-fonts-4">[CSS-FONTS-4]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/">CSS Fonts Module Level 4</a>. 20 September 2018. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a>
   <dt id="biblio-css3-flexbox">[CSS3-FLEXBOX]
   <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a>
   <dt id="biblio-css3-fonts">[CSS3-FONTS]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a>
   <dt id="biblio-html401">[HTML401]
   <dd>Dave Raggett; Arnaud Le Hors; Ian Jacobs. <a href="https://www.w3.org/TR/html401/">HTML 4.01 Specification</a>. 27 March 2018. REC. URL: <a href="https://www.w3.org/TR/html401/">https://www.w3.org/TR/html401/</a>
   <dt id="biblio-utn22">[UTN22]
   <dd>Elika J. Etemad. <a href="https://unicode.org/notes/tn22/">Robust Vertical Text Layout</a>. 25 April 2005. Unicode Technical Note #22. URL: <a href="https://unicode.org/notes/tn22/">https://unicode.org/notes/tn22/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Ani­mat­able
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-direction" id="ref-for-propdef-direction③⑦">direction</a>
      <td>ltr | rtl
      <td>ltr
      <td>all elements
      <td>yes
      <td>n/a
      <td>
      <td>not animatable
      <td>n/a
      <td>specified value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical⑤">glyph-orientation-vertical</a>
      <td>auto | 0deg | 90deg | 0 | 90
      <td>n/a
      <td>n/a
      <td>n/a
      <td>n/a
      <td>n/a
      <td>
      <td>n/a
      <td>n/a
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-combine-upright" id="ref-for-propdef-text-combine-upright①④">text-combine-upright</a>
      <td>none | all | [ digits &lt;integer>? ]
      <td>none
      <td>non-replaced inline elements
      <td>yes
      <td>n/a
      <td>
      <td>not animatable
      <td>n/a
      <td>specified keyword, plus integer if digits
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-text-orientation" id="ref-for-propdef-text-orientation①⑨">text-orientation</a>
      <td>mixed | upright | sideways
      <td>mixed
      <td>all elements except table row groups, rows, column groups, and columns
      <td>yes
      <td>n/a
      <td>
      <td>not animatable
      <td>n/a
      <td>specified value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②⑤">unicode-bidi</a>
      <td>normal | embed | isolate | bidi-override | isolate-override | plaintext
      <td>normal
      <td>all elements, but see prose
      <td>no
      <td>n/a
      <td>
      <td>not animatable
      <td>per grammar
      <td>specified value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-writing-mode" id="ref-for-propdef-writing-mode②⑧">writing-mode</a>
      <td>horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
      <td>horizontal-tb
      <td>All elements except table row groups, table column groups, table rows, table columns, ruby base container, ruby annotation container
      <td>yes
      <td>n/a
      <td>
      <td>not animatable
      <td>n/a
      <td>specified value
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Should we factor in the box’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-block-size">min-content block size</a> in this formula,
        so that e.g. a large image will not overflow the box,
        but cause the box to overflow the containing block? <a href="#issue-fae7187e"> ↵ </a></div>
   <div class="issue"> Does it also propagate to @page boxes?<a href="#issue-80e9901b"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="writing-mode">
   <b><a href="#writing-mode">#writing-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-writing-mode">1.1. 
Module Interactions</a> <a href="#ref-for-writing-mode①">(2)</a>
    <li><a href="#ref-for-writing-mode②">3.2. 
Block Flow Direction: the writing-mode property</a> <a href="#ref-for-writing-mode③">(2)</a> <a href="#ref-for-writing-mode④">(3)</a> <a href="#ref-for-writing-mode⑤">(4)</a> <a href="#ref-for-writing-mode⑥">(5)</a> <a href="#ref-for-writing-mode⑦">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inline-base-direction">
   <b><a href="#inline-base-direction">#inline-base-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-base-direction">1. 
Introduction to Writing Modes</a>
    <li><a href="#ref-for-inline-base-direction①">2.1. 
Specifying Directionality: the direction property</a> <a href="#ref-for-inline-base-direction②">(2)</a> <a href="#ref-for-inline-base-direction③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-flow-direction">
   <b><a href="#block-flow-direction">#block-flow-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-flow-direction">1. 
Introduction to Writing Modes</a>
    <li><a href="#ref-for-block-flow-direction①">3.2. 
Block Flow Direction: the writing-mode property</a> <a href="#ref-for-block-flow-direction②">(2)</a> <a href="#ref-for-block-flow-direction③">(3)</a> <a href="#ref-for-block-flow-direction④">(4)</a> <a href="#ref-for-block-flow-direction⑤">(5)</a> <a href="#ref-for-block-flow-direction⑥">(6)</a>
    <li><a href="#ref-for-block-flow-direction⑦">6.2. 
Flow-relative Directions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typographic-mode">
   <b><a href="#typographic-mode">#typographic-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typographic-mode">3.2. 
Block Flow Direction: the writing-mode property</a> <a href="#ref-for-typographic-mode①">(2)</a> <a href="#ref-for-typographic-mode②">(3)</a> <a href="#ref-for-typographic-mode③">(4)</a> <a href="#ref-for-typographic-mode④">(5)</a>
    <li><a href="#ref-for-typographic-mode⑤">4.1. 
Introduction to Baselines</a>
    <li><a href="#ref-for-typographic-mode⑥">4.2. 
Text Baselines</a>
    <li><a href="#ref-for-typographic-mode⑦">4.4. 
Baseline Alignment</a>
    <li><a href="#ref-for-typographic-mode⑧">5.1. 
Orienting Text: the text-orientation property</a> <a href="#ref-for-typographic-mode⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="horizontal-writing-mode">
   <b><a href="#horizontal-writing-mode">#horizontal-writing-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-horizontal-writing-mode">5.1. 
Orienting Text: the text-orientation property</a>
    <li><a href="#ref-for-horizontal-writing-mode①">9.1.2. 
Layout Rules</a>
    <li><a href="#ref-for-horizontal-writing-mode②"> Changes since the May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vertical-writing-mode">
   <b><a href="#vertical-writing-mode">#vertical-writing-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vertical-writing-mode">6.4. 
Abstract-to-Physical Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-direction">
   <b><a href="#propdef-direction">#propdef-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-direction">1. 
Introduction to Writing Modes</a> <a href="#ref-for-propdef-direction①">(2)</a>
    <li><a href="#ref-for-propdef-direction②">1.1. 
Module Interactions</a> <a href="#ref-for-propdef-direction③">(2)</a>
    <li><a href="#ref-for-propdef-direction④">2. 
Inline Direction and Bidirectionality</a> <a href="#ref-for-propdef-direction⑤">(2)</a>
    <li><a href="#ref-for-propdef-direction⑥">2.1. 
Specifying Directionality: the direction property</a> <a href="#ref-for-propdef-direction⑦">(2)</a> <a href="#ref-for-propdef-direction⑧">(3)</a> <a href="#ref-for-propdef-direction⑨">(4)</a>
    <li><a href="#ref-for-propdef-direction①⓪">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-propdef-direction①①">(2)</a> <a href="#ref-for-propdef-direction①②">(3)</a> <a href="#ref-for-propdef-direction①③">(4)</a> <a href="#ref-for-propdef-direction①④">(5)</a> <a href="#ref-for-propdef-direction①⑤">(6)</a> <a href="#ref-for-propdef-direction①⑥">(7)</a>
    <li><a href="#ref-for-propdef-direction①⑦">2.4.1. 
Bidi Paragraph Embedding Levels</a>
    <li><a href="#ref-for-propdef-direction①⑧">2.4.3. 
Bidi Treatment of Atomic Inlines</a>
    <li><a href="#ref-for-propdef-direction①⑨">2.4.5.2. 
Box Model of Reordering-induced Box Fragments</a> <a href="#ref-for-propdef-direction②⓪">(2)</a>
    <li><a href="#ref-for-propdef-direction②①">5.1. 
Orienting Text: the text-orientation property</a> <a href="#ref-for-propdef-direction②②">(2)</a> <a href="#ref-for-propdef-direction②③">(3)</a>
    <li><a href="#ref-for-propdef-direction②④">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-propdef-direction②⑤">6.2. 
Flow-relative Directions</a> <a href="#ref-for-propdef-direction②⑥">(2)</a> <a href="#ref-for-propdef-direction②⑦">(3)</a>
    <li><a href="#ref-for-propdef-direction②⑧">6.4. 
Abstract-to-Physical Mappings</a> <a href="#ref-for-propdef-direction②⑨">(2)</a> <a href="#ref-for-propdef-direction③⓪">(3)</a> <a href="#ref-for-propdef-direction③①">(4)</a>
    <li><a href="#ref-for-propdef-direction③②">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-propdef-direction③③">8. 
The Principal Writing Mode</a> <a href="#ref-for-propdef-direction③④">(2)</a> <a href="#ref-for-propdef-direction③⑤">(3)</a> <a href="#ref-for-propdef-direction③⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-direction-ltr">
   <b><a href="#valdef-direction-ltr">#valdef-direction-ltr</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-direction-ltr">2.2. 
Embeddings and Overrides: the unicode-bidi property</a>
    <li><a href="#ref-for-valdef-direction-ltr①">2.4.5.2. 
Box Model of Reordering-induced Box Fragments</a>
    <li><a href="#ref-for-valdef-direction-ltr②">5.1. 
Orienting Text: the text-orientation property</a>
    <li><a href="#ref-for-valdef-direction-ltr③">6.2. 
Flow-relative Directions</a>
    <li><a href="#ref-for-valdef-direction-ltr④">6.4. 
Abstract-to-Physical Mappings</a> <a href="#ref-for-valdef-direction-ltr⑤">(2)</a> <a href="#ref-for-valdef-direction-ltr⑥">(3)</a> <a href="#ref-for-valdef-direction-ltr⑦">(4)</a> <a href="#ref-for-valdef-direction-ltr⑧">(5)</a>
    <li><a href="#ref-for-valdef-direction-ltr⑨">8.2. 
Page Flow: the page progression direction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-direction-rtl">
   <b><a href="#valdef-direction-rtl">#valdef-direction-rtl</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-direction-rtl">2.2. 
Embeddings and Overrides: the unicode-bidi property</a>
    <li><a href="#ref-for-valdef-direction-rtl①">2.4.5.2. 
Box Model of Reordering-induced Box Fragments</a>
    <li><a href="#ref-for-valdef-direction-rtl②">5.1. 
Orienting Text: the text-orientation property</a>
    <li><a href="#ref-for-valdef-direction-rtl③">6.2. 
Flow-relative Directions</a>
    <li><a href="#ref-for-valdef-direction-rtl④">6.4. 
Abstract-to-Physical Mappings</a> <a href="#ref-for-valdef-direction-rtl⑤">(2)</a> <a href="#ref-for-valdef-direction-rtl⑥">(3)</a> <a href="#ref-for-valdef-direction-rtl⑦">(4)</a>
    <li><a href="#ref-for-valdef-direction-rtl⑧">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-valdef-direction-rtl⑨">8.2. 
Page Flow: the page progression direction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-unicode-bidi">
   <b><a href="#propdef-unicode-bidi">#propdef-unicode-bidi</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-unicode-bidi">1. 
Introduction to Writing Modes</a>
    <li><a href="#ref-for-propdef-unicode-bidi①">1.1. 
Module Interactions</a>
    <li><a href="#ref-for-propdef-unicode-bidi②">2. 
Inline Direction and Bidirectionality</a> <a href="#ref-for-propdef-unicode-bidi③">(2)</a>
    <li><a href="#ref-for-propdef-unicode-bidi④">2.1. 
Specifying Directionality: the direction property</a> <a href="#ref-for-propdef-unicode-bidi⑤">(2)</a>
    <li><a href="#ref-for-propdef-unicode-bidi⑥">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-propdef-unicode-bidi⑦">(2)</a> <a href="#ref-for-propdef-unicode-bidi⑧">(3)</a> <a href="#ref-for-propdef-unicode-bidi⑨">(4)</a> <a href="#ref-for-propdef-unicode-bidi①⓪">(5)</a> <a href="#ref-for-propdef-unicode-bidi①①">(6)</a> <a href="#ref-for-propdef-unicode-bidi①②">(7)</a> <a href="#ref-for-propdef-unicode-bidi①③">(8)</a> <a href="#ref-for-propdef-unicode-bidi①④">(9)</a> <a href="#ref-for-propdef-unicode-bidi①⑤">(10)</a> <a href="#ref-for-propdef-unicode-bidi①⑥">(11)</a> <a href="#ref-for-propdef-unicode-bidi①⑦">(12)</a> <a href="#ref-for-propdef-unicode-bidi①⑧">(13)</a>
    <li><a href="#ref-for-propdef-unicode-bidi①⑨">2.3. 
Example of Bidirectional Text</a>
    <li><a href="#ref-for-propdef-unicode-bidi②⓪">2.4.1. 
Bidi Paragraph Embedding Levels</a>
    <li><a href="#ref-for-propdef-unicode-bidi②①">2.4.2. 
CSS–Unicode Bidi Control Translation, Text Reordering</a>
    <li><a href="#ref-for-propdef-unicode-bidi②②">2.4.3. 
Bidi Treatment of Atomic Inlines</a>
    <li><a href="#ref-for-propdef-unicode-bidi②③">2.4.4. 
Paragraph Breaks Within Embeddings and Isolates</a>
    <li><a href="#ref-for-propdef-unicode-bidi②④">5.1. 
Orienting Text: the text-orientation property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-unicode-bidi-normal">
   <b><a href="#valdef-unicode-bidi-normal">#valdef-unicode-bidi-normal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-unicode-bidi-normal">2.1. 
Specifying Directionality: the direction property</a>
    <li><a href="#ref-for-valdef-unicode-bidi-normal①">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-valdef-unicode-bidi-normal②">(2)</a> <a href="#ref-for-valdef-unicode-bidi-normal③">(3)</a> <a href="#ref-for-valdef-unicode-bidi-normal④">(4)</a> <a href="#ref-for-valdef-unicode-bidi-normal⑤">(5)</a>
    <li><a href="#ref-for-valdef-unicode-bidi-normal⑥">2.3. 
Example of Bidirectional Text</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-unicode-bidi-embed">
   <b><a href="#valdef-unicode-bidi-embed">#valdef-unicode-bidi-embed</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-unicode-bidi-embed">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-valdef-unicode-bidi-embed①">(2)</a>
    <li><a href="#ref-for-valdef-unicode-bidi-embed②">2.4.3. 
Bidi Treatment of Atomic Inlines</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="directional-embedding">
   <b><a href="#directional-embedding">#directional-embedding</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-directional-embedding">2.2. 
Embeddings and Overrides: the unicode-bidi property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-unicode-bidi-isolate">
   <b><a href="#valdef-unicode-bidi-isolate">#valdef-unicode-bidi-isolate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-unicode-bidi-isolate">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-valdef-unicode-bidi-isolate①">(2)</a> <a href="#ref-for-valdef-unicode-bidi-isolate②">(3)</a> <a href="#ref-for-valdef-unicode-bidi-isolate③">(4)</a> <a href="#ref-for-valdef-unicode-bidi-isolate④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="bidi-isolate">
   <b><a href="#bidi-isolate">#bidi-isolate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-bidi-isolate">2.2. 
Embeddings and Overrides: the unicode-bidi property</a>
    <li><a href="#ref-for-bidi-isolate①">9.1.2. 
Layout Rules</a>
    <li><a href="#ref-for-bidi-isolate②"> Changes since the May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="isolated-sequence">
   <b><a href="#isolated-sequence">#isolated-sequence</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-isolated-sequence">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-isolated-sequence①">(2)</a>
    <li><a href="#ref-for-isolated-sequence②">2.3. 
Example of Bidirectional Text</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-unicode-bidi-bidi-override">
   <b><a href="#valdef-unicode-bidi-bidi-override">#valdef-unicode-bidi-bidi-override</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-unicode-bidi-bidi-override">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-valdef-unicode-bidi-bidi-override①">(2)</a> <a href="#ref-for-valdef-unicode-bidi-bidi-override②">(3)</a> <a href="#ref-for-valdef-unicode-bidi-bidi-override③">(4)</a> <a href="#ref-for-valdef-unicode-bidi-bidi-override④">(5)</a>
    <li><a href="#ref-for-valdef-unicode-bidi-bidi-override⑤">2.4.3. 
Bidi Treatment of Atomic Inlines</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="directional-override">
   <b><a href="#directional-override">#directional-override</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-directional-override">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-directional-override①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-unicode-bidi-isolate-override">
   <b><a href="#valdef-unicode-bidi-isolate-override">#valdef-unicode-bidi-isolate-override</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-unicode-bidi-isolate-override">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-valdef-unicode-bidi-isolate-override①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-unicode-bidi-plaintext">
   <b><a href="#valdef-unicode-bidi-plaintext">#valdef-unicode-bidi-plaintext</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-unicode-bidi-plaintext">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-valdef-unicode-bidi-plaintext①">(2)</a> <a href="#ref-for-valdef-unicode-bidi-plaintext②">(3)</a> <a href="#ref-for-valdef-unicode-bidi-plaintext③">(4)</a>
    <li><a href="#ref-for-valdef-unicode-bidi-plaintext④">2.4.1. 
Bidi Paragraph Embedding Levels</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="forced-paragraph-break">
   <b><a href="#forced-paragraph-break">#forced-paragraph-break</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-forced-paragraph-break">2.2. 
Embeddings and Overrides: the unicode-bidi property</a> <a href="#ref-for-forced-paragraph-break①">(2)</a>
    <li><a href="#ref-for-forced-paragraph-break②">2.4.4. 
Paragraph Breaks Within Embeddings and Isolates</a> <a href="#ref-for-forced-paragraph-break③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="bidi-paragraph">
   <b><a href="#bidi-paragraph">#bidi-paragraph</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-bidi-paragraph">2.2. 
Embeddings and Overrides: the unicode-bidi property</a>
    <li><a href="#ref-for-bidi-paragraph①">2.4.2. 
CSS–Unicode Bidi Control Translation, Text Reordering</a>
    <li><a href="#ref-for-bidi-paragraph②">2.4.4. 
Paragraph Breaks Within Embeddings and Isolates</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-writing-mode">
   <b><a href="#propdef-writing-mode">#propdef-writing-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode">1. 
Introduction to Writing Modes</a> <a href="#ref-for-propdef-writing-mode①">(2)</a>
    <li><a href="#ref-for-propdef-writing-mode②">1.1. 
Module Interactions</a>
    <li><a href="#ref-for-propdef-writing-mode③">3.2. 
Block Flow Direction: the writing-mode property</a> <a href="#ref-for-propdef-writing-mode④">(2)</a> <a href="#ref-for-propdef-writing-mode⑤">(3)</a> <a href="#ref-for-propdef-writing-mode⑥">(4)</a> <a href="#ref-for-propdef-writing-mode⑦">(5)</a>
    <li><a href="#ref-for-propdef-writing-mode⑧">3.2.1. 
Obsolete SVG1.1 writing-mode Values</a>
    <li><a href="#ref-for-propdef-writing-mode⑨">3.2.1.1. 
Supporting SVG1.1 writing-mode values in CSS syntax</a> <a href="#ref-for-propdef-writing-mode①⓪">(2)</a> <a href="#ref-for-propdef-writing-mode①①">(3)</a>
    <li><a href="#ref-for-propdef-writing-mode①②">3.2.1.2. 
Supporting SVG1.1 writing-mode values in presentational attributes</a>
    <li><a href="#ref-for-propdef-writing-mode①③">5.1. 
Orienting Text: the text-orientation property</a>
    <li><a href="#ref-for-propdef-writing-mode①④">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-propdef-writing-mode①⑤">6.2. 
Flow-relative Directions</a> <a href="#ref-for-propdef-writing-mode①⑥">(2)</a> <a href="#ref-for-propdef-writing-mode①⑦">(3)</a>
    <li><a href="#ref-for-propdef-writing-mode①⑧">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-propdef-writing-mode①⑨">6.4. 
Abstract-to-Physical Mappings</a> <a href="#ref-for-propdef-writing-mode②⓪">(2)</a> <a href="#ref-for-propdef-writing-mode②①">(3)</a>
    <li><a href="#ref-for-propdef-writing-mode②②">7.3. 
Orthogonal Flows</a>
    <li><a href="#ref-for-propdef-writing-mode②③">8. 
The Principal Writing Mode</a> <a href="#ref-for-propdef-writing-mode②④">(2)</a> <a href="#ref-for-propdef-writing-mode②⑤">(3)</a> <a href="#ref-for-propdef-writing-mode②⑥">(4)</a>
    <li><a href="#ref-for-propdef-writing-mode②⑦"> New in Level 4</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-writing-mode-horizontal-tb">
   <b><a href="#valdef-writing-mode-horizontal-tb">#valdef-writing-mode-horizontal-tb</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb">2.4.5.2. 
Box Model of Reordering-induced Box Fragments</a>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb①">3.2.1.1. 
Supporting SVG1.1 writing-mode values in CSS syntax</a>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb②">6. 
Abstract Box Terminology</a> <a href="#ref-for-valdef-writing-mode-horizontal-tb③">(2)</a>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb④">6.2. 
Flow-relative Directions</a> <a href="#ref-for-valdef-writing-mode-horizontal-tb⑤">(2)</a>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb⑥">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb⑦">6.4. 
Abstract-to-Physical Mappings</a>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb⑧">7.3. 
Orthogonal Flows</a>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb⑨">7.5. 
Line-Relative Mappings</a>
    <li><a href="#ref-for-valdef-writing-mode-horizontal-tb①⓪">8.2. 
Page Flow: the page progression direction</a> <a href="#ref-for-valdef-writing-mode-horizontal-tb①①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-writing-mode-vertical-rl">
   <b><a href="#valdef-writing-mode-vertical-rl">#valdef-writing-mode-vertical-rl</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl">3.2. 
Block Flow Direction: the writing-mode property</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl①">3.2.1.1. 
Supporting SVG1.1 writing-mode values in CSS syntax</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl②">5.1. 
Orienting Text: the text-orientation property</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl③">5.1.1. 
Vertical Typesetting and Font Features</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl④">6.2. 
Flow-relative Directions</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl⑤">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl⑥">6.4. 
Abstract-to-Physical Mappings</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl⑦">7.1. 
Principles of Layout in Vertical Writing Modes</a> <a href="#ref-for-valdef-writing-mode-vertical-rl⑧">(2)</a> <a href="#ref-for-valdef-writing-mode-vertical-rl⑨">(3)</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl①⓪">7.3. 
Orthogonal Flows</a> <a href="#ref-for-valdef-writing-mode-vertical-rl①①">(2)</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-rl①②">8.2. 
Page Flow: the page progression direction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-writing-mode-vertical-lr">
   <b><a href="#valdef-writing-mode-vertical-lr">#valdef-writing-mode-vertical-lr</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-vertical-lr">3.2.1.1. 
Supporting SVG1.1 writing-mode values in CSS syntax</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-lr①">5.1.1. 
Vertical Typesetting and Font Features</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-lr②">6.2. 
Flow-relative Directions</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-lr③">6.3. 
Line-relative Directions</a> <a href="#ref-for-valdef-writing-mode-vertical-lr④">(2)</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-lr⑤">6.4. 
Abstract-to-Physical Mappings</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-lr⑥">7.3. 
Orthogonal Flows</a>
    <li><a href="#ref-for-valdef-writing-mode-vertical-lr⑦">8.2. 
Page Flow: the page progression direction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-writing-mode-sideways-rl">
   <b><a href="#valdef-writing-mode-sideways-rl">#valdef-writing-mode-sideways-rl</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-sideways-rl">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-valdef-writing-mode-sideways-rl①">6.4. 
Abstract-to-Physical Mappings</a>
    <li><a href="#ref-for-valdef-writing-mode-sideways-rl②">8.2. 
Page Flow: the page progression direction</a>
    <li><a href="#ref-for-valdef-writing-mode-sideways-rl③"> New in Level 4</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-writing-mode-sideways-lr">
   <b><a href="#valdef-writing-mode-sideways-lr">#valdef-writing-mode-sideways-lr</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-writing-mode-sideways-lr">5.1.2. 
Mixed Vertical Orientations</a>
    <li><a href="#ref-for-valdef-writing-mode-sideways-lr①">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-valdef-writing-mode-sideways-lr②">6.4. 
Abstract-to-Physical Mappings</a>
    <li><a href="#ref-for-valdef-writing-mode-sideways-lr③">8.2. 
Page Flow: the page progression direction</a>
    <li><a href="#ref-for-valdef-writing-mode-sideways-lr④"> New in Level 4</a>
    <li><a href="#ref-for-valdef-writing-mode-sideways-lr⑤">Appendix A:
Vertical Scripts in Unicode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="alphabetic-baseline">
   <b><a href="#alphabetic-baseline">#alphabetic-baseline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-alphabetic-baseline">4.2. 
Text Baselines</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="central-baseline">
   <b><a href="#central-baseline">#central-baseline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-central-baseline">4.2. 
Text Baselines</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="horizontal-only">
   <b><a href="#horizontal-only">#horizontal-only</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-horizontal-only">5. 
Introduction to Vertical Text Layout</a> <a href="#ref-for-horizontal-only①">(2)</a>
    <li><a href="#ref-for-horizontal-only②">Appendix A:
Vertical Scripts in Unicode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vertical-only">
   <b><a href="#vertical-only">#vertical-only</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vertical-only">5. 
Introduction to Vertical Text Layout</a>
    <li><a href="#ref-for-vertical-only①">Appendix A:
Vertical Scripts in Unicode</a> <a href="#ref-for-vertical-only②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="bi-orientational">
   <b><a href="#bi-orientational">#bi-orientational</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-bi-orientational">5. 
Introduction to Vertical Text Layout</a> <a href="#ref-for-bi-orientational①">(2)</a>
    <li><a href="#ref-for-bi-orientational②">Appendix A:
Vertical Scripts in Unicode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vertical-script">
   <b><a href="#vertical-script">#vertical-script</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vertical-script">1. 
Introduction to Writing Modes</a> <a href="#ref-for-vertical-script①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="horizontal-script">
   <b><a href="#horizontal-script">#horizontal-script</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-horizontal-script">Appendix A:
Vertical Scripts in Unicode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="bi-orientational-transform">
   <b><a href="#bi-orientational-transform">#bi-orientational-transform</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-bi-orientational-transform">5. 
Introduction to Vertical Text Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-orientation">
   <b><a href="#propdef-text-orientation">#propdef-text-orientation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-orientation">1. 
Introduction to Writing Modes</a> <a href="#ref-for-propdef-text-orientation①">(2)</a>
    <li><a href="#ref-for-propdef-text-orientation②">1.1. 
Module Interactions</a>
    <li><a href="#ref-for-propdef-text-orientation③">3.2. 
Block Flow Direction: the writing-mode property</a>
    <li><a href="#ref-for-propdef-text-orientation④">4.2. 
Text Baselines</a>
    <li><a href="#ref-for-propdef-text-orientation⑤">5. 
Introduction to Vertical Text Layout</a>
    <li><a href="#ref-for-propdef-text-orientation⑥">5.1. 
Orienting Text: the text-orientation property</a> <a href="#ref-for-propdef-text-orientation⑦">(2)</a>
    <li><a href="#ref-for-propdef-text-orientation⑧">5.1.2. 
Mixed Vertical Orientations</a>
    <li><a href="#ref-for-propdef-text-orientation⑨">5.1.3. 
Obsolete: the SVG1.1 glyph-orientation-vertical property</a> <a href="#ref-for-propdef-text-orientation①⓪">(2)</a>
    <li><a href="#ref-for-propdef-text-orientation①①">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-propdef-text-orientation①②">6.4. 
Abstract-to-Physical Mappings</a> <a href="#ref-for-propdef-text-orientation①③">(2)</a>
    <li><a href="#ref-for-propdef-text-orientation①④">8. 
The Principal Writing Mode</a> <a href="#ref-for-propdef-text-orientation①⑤">(2)</a> <a href="#ref-for-propdef-text-orientation①⑥">(3)</a>
    <li><a href="#ref-for-propdef-text-orientation①⑦">9.1.2. 
Layout Rules</a>
    <li><a href="#ref-for-propdef-text-orientation①⑧"> Changes since the May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-orientation-mixed">
   <b><a href="#valdef-text-orientation-mixed">#valdef-text-orientation-mixed</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-orientation-mixed">4.2. 
Text Baselines</a>
    <li><a href="#ref-for-valdef-text-orientation-mixed①">5. 
Introduction to Vertical Text Layout</a>
    <li><a href="#ref-for-valdef-text-orientation-mixed②">5.1. 
Orienting Text: the text-orientation property</a>
    <li><a href="#ref-for-valdef-text-orientation-mixed③">5.1.2. 
Mixed Vertical Orientations</a> <a href="#ref-for-valdef-text-orientation-mixed④">(2)</a>
    <li><a href="#ref-for-valdef-text-orientation-mixed⑤">5.1.3. 
Obsolete: the SVG1.1 glyph-orientation-vertical property</a>
    <li><a href="#ref-for-valdef-text-orientation-mixed⑥">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-valdef-text-orientation-mixed⑦">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-valdef-text-orientation-mixed⑧">Appendix A:
Vertical Scripts in Unicode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-orientation-upright">
   <b><a href="#valdef-text-orientation-upright">#valdef-text-orientation-upright</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-orientation-upright">4.2. 
Text Baselines</a>
    <li><a href="#ref-for-valdef-text-orientation-upright①">5. 
Introduction to Vertical Text Layout</a>
    <li><a href="#ref-for-valdef-text-orientation-upright②">5.1. 
Orienting Text: the text-orientation property</a> <a href="#ref-for-valdef-text-orientation-upright③">(2)</a>
    <li><a href="#ref-for-valdef-text-orientation-upright④">5.1.3. 
Obsolete: the SVG1.1 glyph-orientation-vertical property</a> <a href="#ref-for-valdef-text-orientation-upright⑤">(2)</a>
    <li><a href="#ref-for-valdef-text-orientation-upright⑥">6.4. 
Abstract-to-Physical Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-orientation-sideways">
   <b><a href="#valdef-text-orientation-sideways">#valdef-text-orientation-sideways</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-orientation-sideways">5.1. 
Orienting Text: the text-orientation property</a> <a href="#ref-for-valdef-text-orientation-sideways①">(2)</a>
    <li><a href="#ref-for-valdef-text-orientation-sideways②">5.1.3. 
Obsolete: the SVG1.1 glyph-orientation-vertical property</a> <a href="#ref-for-valdef-text-orientation-sideways③">(2)</a>
    <li><a href="#ref-for-valdef-text-orientation-sideways④">6.3. 
Line-relative Directions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-glyph-orientation-vertical">
   <b><a href="#propdef-glyph-orientation-vertical">#propdef-glyph-orientation-vertical</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-glyph-orientation-vertical">5.1.3. 
Obsolete: the SVG1.1 glyph-orientation-vertical property</a> <a href="#ref-for-propdef-glyph-orientation-vertical①">(2)</a> <a href="#ref-for-propdef-glyph-orientation-vertical②">(3)</a> <a href="#ref-for-propdef-glyph-orientation-vertical③">(4)</a> <a href="#ref-for-propdef-glyph-orientation-vertical④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="x-axis">
   <b><a href="#x-axis">#x-axis</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-x-axis">6.1. 
Abstract Dimensions</a> <a href="#ref-for-x-axis①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="horizontal-dimension">
   <b><a href="#horizontal-dimension">#horizontal-dimension</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-horizontal-dimension">6.1. 
Abstract Dimensions</a> <a href="#ref-for-horizontal-dimension①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="y-axis">
   <b><a href="#y-axis">#y-axis</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-y-axis">6.1. 
Abstract Dimensions</a> <a href="#ref-for-y-axis①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vertical-dimension">
   <b><a href="#vertical-dimension">#vertical-dimension</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vertical-dimension">6.1. 
Abstract Dimensions</a> <a href="#ref-for-vertical-dimension①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-axis">
   <b><a href="#block-axis">#block-axis</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-axis">7.3. 
Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inline-axis">
   <b><a href="#inline-axis">#inline-axis</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-axis">4.1. 
Introduction to Baselines</a>
    <li><a href="#ref-for-inline-axis①">5.1.1. 
Vertical Typesetting and Font Features</a>
    <li><a href="#ref-for-inline-axis②">7.3. 
Orthogonal Flows</a> <a href="#ref-for-inline-axis③">(2)</a>
    <li><a href="#ref-for-inline-axis④">7.3.1. 
Available Space in Orthogonal Flows</a>
    <li><a href="#ref-for-inline-axis⑤">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-size">
   <b><a href="#block-size">#block-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-size">7.2. 
Dimensional Mapping</a>
    <li><a href="#ref-for-block-size①">7.3. 
Orthogonal Flows</a> <a href="#ref-for-block-size②">(2)</a> <a href="#ref-for-block-size③">(3)</a> <a href="#ref-for-block-size④">(4)</a>
    <li><a href="#ref-for-block-size⑤">7.3.1. 
Available Space in Orthogonal Flows</a> <a href="#ref-for-block-size⑥">(2)</a> <a href="#ref-for-block-size⑦">(3)</a>
    <li><a href="#ref-for-block-size⑧">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-block-size⑨">(2)</a> <a href="#ref-for-block-size①⓪">(3)</a> <a href="#ref-for-block-size①①">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inline-size">
   <b><a href="#inline-size">#inline-size</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-size">7.2. 
Dimensional Mapping</a> <a href="#ref-for-inline-size①">(2)</a>
    <li><a href="#ref-for-inline-size②">7.3. 
Orthogonal Flows</a> <a href="#ref-for-inline-size③">(2)</a> <a href="#ref-for-inline-size④">(3)</a> <a href="#ref-for-inline-size⑤">(4)</a> <a href="#ref-for-inline-size⑥">(5)</a> <a href="#ref-for-inline-size⑦">(6)</a>
    <li><a href="#ref-for-inline-size⑧">7.3.1. 
Available Space in Orthogonal Flows</a> <a href="#ref-for-inline-size⑨">(2)</a> <a href="#ref-for-inline-size①⓪">(3)</a>
    <li><a href="#ref-for-inline-size①①">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a> <a href="#ref-for-inline-size①②">(2)</a> <a href="#ref-for-inline-size①③">(3)</a> <a href="#ref-for-inline-size①④">(4)</a> <a href="#ref-for-inline-size①⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="flow-relative-direction">
   <b><a href="#flow-relative-direction">#flow-relative-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flow-relative-direction">7.1. 
Principles of Layout in Vertical Writing Modes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-start">
   <b><a href="#block-start">#block-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-start">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-block-start①">6.2. 
Flow-relative Directions</a> <a href="#ref-for-block-start②">(2)</a> <a href="#ref-for-block-start③">(3)</a> <a href="#ref-for-block-start④">(4)</a>
    <li><a href="#ref-for-block-start⑤">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-block-start⑥">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-block-start⑦">7.2. 
Dimensional Mapping</a>
    <li><a href="#ref-for-block-start⑧">7.4. 
Flow-Relative Mappings</a> <a href="#ref-for-block-start⑨">(2)</a> <a href="#ref-for-block-start①⓪">(3)</a> <a href="#ref-for-block-start①①">(4)</a> <a href="#ref-for-block-start①②">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-end">
   <b><a href="#block-end">#block-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-end">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-block-end①">6.2. 
Flow-relative Directions</a> <a href="#ref-for-block-end②">(2)</a> <a href="#ref-for-block-end③">(3)</a>
    <li><a href="#ref-for-block-end④">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-block-end⑤">7.2. 
Dimensional Mapping</a>
    <li><a href="#ref-for-block-end⑥">7.4. 
Flow-Relative Mappings</a> <a href="#ref-for-block-end⑦">(2)</a> <a href="#ref-for-block-end⑧">(3)</a> <a href="#ref-for-block-end⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inline-start">
   <b><a href="#inline-start">#inline-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-start">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-inline-start①">6.2. 
Flow-relative Directions</a> <a href="#ref-for-inline-start②">(2)</a> <a href="#ref-for-inline-start③">(3)</a>
    <li><a href="#ref-for-inline-start④">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-inline-start⑤">7.2. 
Dimensional Mapping</a>
    <li><a href="#ref-for-inline-start⑥">7.4. 
Flow-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inline-end">
   <b><a href="#inline-end">#inline-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-end">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-inline-end①">6.2. 
Flow-relative Directions</a> <a href="#ref-for-inline-end②">(2)</a> <a href="#ref-for-inline-end③">(3)</a>
    <li><a href="#ref-for-inline-end④">7.2. 
Dimensional Mapping</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="start">
   <b><a href="#start">#start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-start">2.4.5.2. 
Box Model of Reordering-induced Box Fragments</a> <a href="#ref-for-start①">(2)</a>
    <li><a href="#ref-for-start②">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-start③">6.2. 
Flow-relative Directions</a>
    <li><a href="#ref-for-start④">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-start⑤">7.4. 
Flow-Relative Mappings</a> <a href="#ref-for-start⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="end">
   <b><a href="#end">#end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-end">2.4.5.2. 
Box Model of Reordering-induced Box Fragments</a>
    <li><a href="#ref-for-end①">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-end②">7.1. 
Principles of Layout in Vertical Writing Modes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="line-orientation">
   <b><a href="#line-orientation">#line-orientation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-orientation">6.3. 
Line-relative Directions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="line-relative-direction">
   <b><a href="#line-relative-direction">#line-relative-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-relative-direction">7.5. 
Line-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="over">
   <b><a href="#over">#over</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-over">4.2. 
Text Baselines</a>
    <li><a href="#ref-for-over①">4.3. 
Atomic Inline Baselines</a>
    <li><a href="#ref-for-over②">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-over③">7.5. 
Line-Relative Mappings</a> <a href="#ref-for-over④">(2)</a> <a href="#ref-for-over⑤">(3)</a> <a href="#ref-for-over⑥">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="line-over">
   <b><a href="#line-over">#line-over</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-over">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-line-over①">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-line-over②">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-line-over③">7.5. 
Line-Relative Mappings</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="under">
   <b><a href="#under">#under</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-under">4.2. 
Text Baselines</a>
    <li><a href="#ref-for-under①">4.3. 
Atomic Inline Baselines</a> <a href="#ref-for-under②">(2)</a>
    <li><a href="#ref-for-under③">7.5. 
Line-Relative Mappings</a> <a href="#ref-for-under④">(2)</a> <a href="#ref-for-under⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="line-under">
   <b><a href="#line-under">#line-under</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-under">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-line-under①">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-line-under②">7.1. 
Principles of Layout in Vertical Writing Modes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="line-left">
   <b><a href="#line-left">#line-left</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-left">2.1. 
Specifying Directionality: the direction property</a> <a href="#ref-for-line-left①">(2)</a>
    <li><a href="#ref-for-line-left②">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-line-left③">6.2. 
Flow-relative Directions</a>
    <li><a href="#ref-for-line-left④">6.3. 
Line-relative Directions</a>
    <li><a href="#ref-for-line-left⑤">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-line-left⑥">7.5. 
Line-Relative Mappings</a> <a href="#ref-for-line-left⑦">(2)</a> <a href="#ref-for-line-left⑧">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="line-right">
   <b><a href="#line-right">#line-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-right">2.1. 
Specifying Directionality: the direction property</a> <a href="#ref-for-line-right①">(2)</a>
    <li><a href="#ref-for-line-right②">6. 
Abstract Box Terminology</a>
    <li><a href="#ref-for-line-right③">6.2. 
Flow-relative Directions</a>
    <li><a href="#ref-for-line-right④">7.1. 
Principles of Layout in Vertical Writing Modes</a>
    <li><a href="#ref-for-line-right⑤">7.5. 
Line-Relative Mappings</a> <a href="#ref-for-line-right⑥">(2)</a> <a href="#ref-for-line-right⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="establish-an-orthogonal-flow">
   <b><a href="#establish-an-orthogonal-flow">#establish-an-orthogonal-flow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-establish-an-orthogonal-flow">7.3. 
Orthogonal Flows</a> <a href="#ref-for-establish-an-orthogonal-flow①">(2)</a> <a href="#ref-for-establish-an-orthogonal-flow②">(3)</a>
    <li><a href="#ref-for-establish-an-orthogonal-flow③">7.3.1. 
Available Space in Orthogonal Flows</a>
    <li><a href="#ref-for-establish-an-orthogonal-flow④">7.3.2. 
Auto-sizing Block Containers in Orthogonal Flows</a>
    <li><a href="#ref-for-establish-an-orthogonal-flow⑤">7.3.3. 
Auto-sizing Other Orthogonal Flow Roots</a> <a href="#ref-for-establish-an-orthogonal-flow⑥">(2)</a> <a href="#ref-for-establish-an-orthogonal-flow⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="principal-writing-mode">
   <b><a href="#principal-writing-mode">#principal-writing-mode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-principal-writing-mode">8.1. 
Propagation to the Initial Containing Block</a>
    <li><a href="#ref-for-principal-writing-mode①">8.2. 
Page Flow: the page progression direction</a> <a href="#ref-for-principal-writing-mode②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-text-combine-upright">
   <b><a href="#propdef-text-combine-upright">#propdef-text-combine-upright</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-combine-upright①">9.1. 
Horizontal-in-Vertical Composition: the text-combine-upright property</a> <a href="#ref-for-propdef-text-combine-upright②">(2)</a>
    <li><a href="#ref-for-propdef-text-combine-upright③">9.1.1. 
Text Run Rules</a> <a href="#ref-for-propdef-text-combine-upright④">(2)</a> <a href="#ref-for-propdef-text-combine-upright⑤">(3)</a> <a href="#ref-for-propdef-text-combine-upright⑥">(4)</a> <a href="#ref-for-propdef-text-combine-upright⑦">(5)</a>
    <li><a href="#ref-for-propdef-text-combine-upright⑧">9.1.2. 
Layout Rules</a>
    <li><a href="#ref-for-propdef-text-combine-upright⑨">9.1.3.1. 
Full-width Characters</a> <a href="#ref-for-propdef-text-combine-upright①⓪">(2)</a>
    <li><a href="#ref-for-propdef-text-combine-upright①①"> Changes since the May
2018 CSS Writing Modes Module Level 4 Candidate Recommendation</a> <a href="#ref-for-propdef-text-combine-upright①②">(2)</a>
    <li><a href="#ref-for-propdef-text-combine-upright①③"> New in Level 4</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-combine-upright-none">
   <b><a href="#valdef-text-combine-upright-none">#valdef-text-combine-upright-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-combine-upright-none">9.1.1. 
Text Run Rules</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-text-combine-upright-all">
   <b><a href="#valdef-text-combine-upright-all">#valdef-text-combine-upright-all</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-text-combine-upright-all">9.1.1. 
Text Run Rules</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>